Input combo

Displays an input field based on the `type` property.

Input combos share the following properties across all types:

Attribute	Description	Values
type	The input field type	text number number.buttons date hour toggle dropdown.list dropdown.checkbox
id	A unique identifier for this field	Any user-defined string
label	The text label shown next to the input	Any user-defined string
description	Small helper text below the label	Any user-defined string
placeholder	The placeholder text shown inside the input field	Any user-defined string
shape	Used to align the label and the input field	compactVertical wideVertical wideHorizontal
value	Sets a default value.	Depends on the input combo type. Check each section.

When you set the value property, it overrides placeholder. The field shows the default value instead of the placeholder text.

Examples

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

    <inputcombo
      description="Choose the variable to which you want to 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 when the measurement was taken"
      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 with buttons"
      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 time when the measurement was taken"
      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">Illuminance</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>