Input combo

Displays an input field depending on the type property.

Input combos have the following properties shared across types:

AttributeDescriptionValues

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

Examples

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

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

    <inputcombo
        type="date"
        id="start_date"
        label="Date"
        description="Set the date in which the measuremet was performed"
        placeholder="Set the date"
    />

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

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

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

    <inputcombo
        type='dropdown.list'
        id='variable_from_list'
        label="Select a variable"
        description="Select a common variable from all devices"
        placeholder='Choose an option'
    >
       <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
        type='dropdown.checkbox'
        id='devices_from_list'
        label="Select multiple options"
        description="Select multiple devices to send data"
        placeholder='Choose multiple options'
    >
        <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>
</form>

Last updated