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

Input combo type text

Displays a standard input text field.

Input combo type number

Displays a standard input that only accepts numbers. The decimal mark is dot (.).

Input combo type number.buttons

Displays an input field that only accepts numbers. The decimal mark is dot (.).

Input combo type number and number.buttons additional properties

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

Input combo type date

Displays a date input field in the format mm/dd/yy, HH:MM (12h format).

Input combo type hour

Displays a time input field in the format HH:MM (12h format).

Input combo type toggle

Displays a toggleable button that can be set to either on or off states.

Input combo type dropdown.list

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.

Input combo type dropdown.checbox

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.

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 modified 2d ago