Skip to content

Input field

Example#

preview

Code-example#

<measmatic-input-field data-id="0" type="text"></measmatic-input-field>
<measmatic-input-field data-id="1" type="text" value="VT-34"></measmatic-input-field>
<measmatic-input-field data-id="2" type="number" optional></measmatic-input-field>
<measmatic-input-field data-id="3" type="number" value="123"></measmatic-input-field>
<measmatic-input-field class="warning" data-id="4" type="number" value="12"></measmatic-input-field>
<measmatic-input-field data-id="5" type="checkbox" checked></measmatic-input-field>
<measmatic-input-field data-id="6" label="float" type="float" value="1.234"></measmatic-input-field>
<measmatic-input-field data-id="7" label="integer" type="integer" value="1"></measmatic-input-field>

Measmatic-input-field#

This custom-element will create a input-field and is used f.e. measmatic-input.

Attributes

  • data-id required to initialize your control with measmatic
  • type supported types are number(= float), float, integer, text and boolean (default: number)
  • checked checkes control when type="checkbox"
  • value presets a value for controls with the type of number or text
  • optional control requires no input

Setter/Getter

  • value sets/gets value of input-field
  • checked sets/gets boolean when type="checkbox"
  • toggle() switch states when type="checkbox"
  • inputType = :string sets/gets type of input (number, text, checkbox)
  • resetInputType() resets the property inputType and inputField.type to the value of the corresponding type-attribute