Comment on page
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 |
|
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 |
|
Displays a standard input text field.
Displays a standard input that only accepts numbers. The decimal mark is dot (.).
Displays an input field that only accepts numbers. The decimal mark is dot (.).
Both input combo type "number" and "number.buttons" feature additional properties than the rest of input combo types, thus allowing control over the inputs to this field. The additional properties are:
Property | Description | Value |
|---|---|---|
min | Min. number accepted | User-defined |
max | Max. number accepted | User-defined |
step | Step increments when increasing or decreasing the number using the buttons. | User-defined. Default is "1". |
Displays a date input field in the format
mm/dd/yy, HH:MM (12h format).Displays a time input field in the format
HH:MM (12h format).Displays a toggleable button that can be set to either on or off states.
Displays a drop-down menu that allows selecting a single option. See the example at the end of this page to know how to add the options to the drop-down.
Displays a drop-down menu that allows selecting multiple options. See the example at the end of this page to know how to add the options to the drop-down.
<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 modified 2d ago