Skip to main content
Version: 1.0.4

Input

A single-line text field. Bound to a writable tag it reads and writes it; bound inside a Form it becomes a field of that form.

The Input component as it renders with its default settings.The Input component as it renders with its default settings.

Reach for it when you need:

  • Operator-entered setpoints and identifiers
  • A field inside a Form

Component name: Input · Category: Input

In the palette: Text input field

Properties

Any property can be bound to a tag, another component's property, or a query.

PropertyTypeDefaultDescription
valuestring""
placeholderstringType here...
typeenumtextOptions: text · number · password · email · tel · url.
titlestringInput Field
showTitlebooleantrue
titleSizenumber13
shadowbooleantrueShow a subtle drop-shadow on the input box. Turn off for a flat look.
clearablebooleanfalseShow an × button (text mode) to clear the value while there is one.
disabledbooleanfalse
stylestyle{}Custom CSS properties

Events

Attach event actions to these in the Event Manager.

EventLabelGroupPayload
clickClickMouseThe DOM event.
dblclickDouble clickMouseThe DOM event.
contextmenuRight clickMouseThe DOM event.
mouseenterMouse enterMouseThe DOM event.
mouseleaveMouse leaveMouseThe DOM event.
changeChangeInputThe DOM event.
submitSubmitInputThe DOM event.
focusFocusInputThe DOM event.
blurBlurInputThe DOM event.
Right-click behaves differently in the Designer

contextmenu fires your configured actions at runtime only — in LiveView and in preview. On the Designer canvas the right-click is captured to open the Event Manager, so testing it there will not run your actions. Test right-click in preview.

Notes

Validate before writing. A value typed by a human is untrusted input like any other — check the range in a script action, or use a Form, which validates before it submits.