# Input combo

Input combos have the following properties shared across types:

<table><thead><tr><th width="141.33333333333331">Attribute</th><th>Description</th><th>Values</th></tr></thead><tbody><tr><td>type</td><td>The type of input field</td><td><ul><li><code>text</code></li><li><code>number</code></li><li><code>number.buttons</code></li><li><code>date</code></li><li><code>hour</code></li><li><code>toggle</code></li><li><code>dropdown.list</code></li><li><code>dropdown.checkbox</code></li></ul></td></tr><tr><td>id</td><td>A unique identifier to access this field</td><td>Any user-defined string</td></tr><tr><td>label</td><td>The text label that will be visible next to the input</td><td>Any user-defined string</td></tr><tr><td>description</td><td>The small text description below the label, used to hint the user about the input</td><td>Any user-defined string</td></tr><tr><td>placeholder</td><td>The placeholder text shown inside the input field</td><td>Any user-defined string</td></tr><tr><td>shape</td><td>Used to align the label and the input field</td><td><ul><li><code>compactVertical</code></li><li><code>wideVertical</code></li><li><code>wideHorizontal</code></li></ul></td></tr><tr><td>value</td><td>Used to set a default value.</td><td>Depends on the inputcombo type. Check each section.</td></tr></tbody></table>

{% hint style="warning" %}
When using the `value` property, it will overrider the `placeholder`, thus, displaying the default set with it instead of the `placeholder.`
{% endhint %}

### Examples

```xml
<form>
    <paragraph type="h1">Send data form</paragraph>

    <inputcombo
      description="Choose the variable to which send data"
      id="variable_label"
      label="Variable label"
      placeholder="Enter the label of the variable"
      type="text"
      value="default"
    />

    <inputcombo
      description="Set the value that you want to send"
      id="variable_value"
      label="Variable value"
      max="100"
      min="0"
      placeholder="Enter the value that you want to send"
      step="2"
      type="number"
      value="34"
    />

    <inputcombo
      description="Set the date in which the measuremet was performed"
      id="start_date"
      label="Date"
      placeholder="Set the date"
      type="date"
      value="2024-07-19T17:30"
    />

    <inputcombo
      description="Set the value that you want to send using buttons"
      id="variable_value_button"
      label="Variable value button using"
      max="100"
      min="0"
      placeholder="Enter the value that you want to send"
      type="number.buttons"
      value="50"
    />

    <inputcombo
      description="Set the state of the device"
      id="enable_device"
      label="Enable device"
      type="toggle"
      value="true"
    />

    <inputcombo
      description="Set the hour at which the measurement was performed"
      id="start_hour"
      label="Start Time"
      type="hour"
      value="21:00"
    />

    <inputcombo
      description="Select a common variable from all devices"
      id="variable_from_list"
      label="Select a variable"
      placeholder="Choose an option"
      type="dropdown.list"
      value="temperature"
    >
      <menu>
        <item id="temperature">Temperature</item>
        <item id="humidity">Humidity</item>
        <item id="iluminance">Iluminance</item>
        <item id="magnetic_flux">Magnetic flux</item>
      </menu>
    </inputcombo>

    <inputcombo
      description="Select multiple devices to send data"
      id="devices_from_list"
      label="Select multiple options"
      placeholder="Choose multiple options"
      type="dropdown.checkbox"
      value="dev_1,dev_2"
    >
      <menu>
        <item id="dev_1">device 1</item>
        <item id="dev_2">device 2</item>
        <item id="dev_3">device 3</item>
        <item id="dev_4">device 4</item>
      </menu>
    </inputcombo>

    <button click="make_request" type="success">Send</button>
  </form>
```