Input combo

Displays an input field depending on the type property.

Input combos have the following properties shared across types:

Attribute	Description	Values
type	The type of input field	text number number.buttons date hour toggle dropdown.list dropdown.checkbox
id	A unique identifier to access this field	Any user-defined string
label	The text label that will be visible next to the input	Any user-defined string
description	The small text description below the label, used to hint the user about the input	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	Used to set a default value.	Depends on the inputcombo type. Check each section.

When using the value property, it will overrider the placeholder, thus, displaying the default set with it instead of the placeholder.

Examples

<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>