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 data-id=8 type=text value=disabled disabled></measmatic-input-field>
<measmatic-card highlight-header>
  <measmatic-input-field data-id=9 type=text value=highlight-header></measmatic-input-field>
  <measmatic-input-field data-id=10 type=text value=content></measmatic-input-field>
</measmatic-card>

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 datatype), float, integer (positive whole numbers), text and checkbox (default: number)
  • checked checkes control when type="checkbox"
  • value presets a value for controls with the type of number, float, integer or text
  • optional control requires no input
  • disabled disables the input-field, can be added or removed at any time

Setter/Getter

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