Text fields and forms

A text field is a component set with the Input behavior: in preview its instances accept typing, show a placeholder while empty and switch between focus and hover states on their own. You need it, with the other component behaviors, when a prototype has to respond like a form. Also called: input field, form controls.

The Input behavior

Where: select a component set or one of its variants → Properties panel → the behavior dropdown (tooltip Behavior) → Input.

Two things share a name. An input is a value a component exposes to its instances (→ Component inputs); the Input behavior makes instances typeable and relies on two such inputs.

• Choosing Input adds two String inputs marked Built-in to the set. They can't be renamed or deleted (→ Defining inputs). An existing String input named "Input value" or "Input text", or starting with "Placeholder", is taken over instead.
• The text layer whose Content is bound to Input value becomes the field: right-click Content → Bind input → Input value (→ Binding a property). Without such a layer nothing accepts typing, and no warning appears.
• Bind the text layer in every state variant: a state without the binding shows the layer's own text and accepts no typing.

Built-in input	What it sets	Default
Input value	The text the field starts with	Empty
Placeholder text	The text shown while the field is empty, per instance	"Placeholder text"

Both have a row on every instance (→ Assigning inputs). Only Input value is offered under Bind input; the behavior draws the placeholder inside the same text layer.

States of a text field

State variants follow the Name:state naming (→ Naming). The Input behavior looks for these:

The field is	States
Filled	Default, :hover, :focus, :focus:hover
Empty	:placeholder, :placeholder:hover, :placeholder:focus, :placeholder:focus:hover

• A missing state falls through in the order :focus:hover → :focus → :hover → Default.
• An empty field looks for a :placeholder state first and, when no variant matches, shows the state of a filled field.
• The placeholder takes the text style of the variant that shows. To gray it out, change the text color in the :placeholder variants.
• Give :placeholder its own :hover and :focus variants whenever the filled field has them; Add state offers :placeholder:hover and :placeholder:focus for that (→ States).
• :placeholder-shown is read as :placeholder. There is no :active and no disabled state.

In preview

• The text layer itself becomes editable, so typed text keeps the layer's font, color and alignment. No browser form control is drawn over it.
• A field takes no line breaks: Enter and Esc leave the field, and line breaks in pasted text become spaces.
• Tab moves through the fields as they appear on screen — row by row, left to right — whatever their layer order.
• Typed text survives the field's state changes. It is never written to the document; a reload brings back Input value.

In preview

The placeholder is drawn in preview only. On the canvas, an instance with an empty Input value shows an empty text layer.

What a form can and cannot do

note

Typed text stays inside the field. No variable, expression or Conditional action can read it, and binding the Input value row to a variable never writes typed text to that variable. No event fires on typing, on Enter, on focus or on submit (→ Events).

• A form can branch on its checkboxes, toggles and radio buttons once their events copy the choice into a variable for a Conditional.
• A form cannot validate or require a field, show typed text elsewhere, or send anything.

The form kit

Five component behaviors make up a form; their states and the Checked input are covered in Variants and interactive states.

Component behavior	Contributes	How a choice reaches a variable
Input	A one-line text field	It can't
Checkbox	An on/off choice that starts at Checked	Check event → Set Variable
Toggle	The same, with :on and :off states	Toggle event → Set Variable
Radio button	One choice out of a group	Click event on each instance → Set Variable
Button	Hover and pressed feedback	— (its Click event runs the form's actions)

Related

• Variants and interactive states — state naming and the states of the other behaviors.
• Component inputs — built-in inputs and the rows on instances.
• Events and actions reference — Check, Toggle, Set Variable, Conditional.