Text fields and forms

A text field is a component set with the Input behavior, or with the Textarea behavior when it takes several lines: 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, text area, form controls.

The Input behavior

Where: select a component set, one of its variants, or a standalone component → 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.

The Textarea behavior

Where: the same dropdown → Textarea.

A Textarea is an Input whose field takes several lines, as a text area does in a browser form. Everything above applies: it mints two built-in inputs, the text layer bound to the first is the field, and the states are those of a text field (→ States). What differs:

• The value input is named Text rather than Input value; the second built-in is Placeholder text, as for Input. An existing String input named "Text", "Input value" or "Input text" is taken over as Text.
• Both built-ins are marked Multiline (→ Defining inputs), so their values can hold line breaks: a placeholder of two lines, a starting value of several. Switching a set between Input and Textarea keeps both inputs, their bindings and the values on instances; it renames the value input between Input value and Text and changes the mark.
• In preview, Enter and Shift+Enter insert a line break instead of leaving the field, pasted text keeps its line breaks, and Esc leaves the field.
• The field follows the text layer's sizing: a layer that hugs its height grows one line at a time and pushes the layers below it; a layer of fixed height scrolls inside, with the browser's scrollbar.
• The field is drawn by the browser from the layer's text style. It shows no paragraph spacing, list markers or gradient fills, and every line shares the style of the first; a plain text layer never has these.

States of a text field

State variants follow the Name:state naming (→ Naming). The Input and Textarea behaviors look 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 tries the :placeholder states in the same order, down to plain :placeholder, and only then the states of a filled field. A hovered or focused empty field therefore keeps its :placeholder look unless the set has :placeholder:hover or :placeholder:focus.
• The placeholder takes the text style of the variant that shows. To gray it out, change the text color in the :placeholder variants.
• To give an empty field hover and focus feedback, add :placeholder:hover and :placeholder:focus; Add state offers both (→ States).
• :placeholder-shown is read as :placeholder. There is no :active and no disabled state.
• The switches between these states can be animated. A set with the Input or Textarea behavior has the transition rows Hover, Focus and Placeholder (→ Transition rows).

In preview

• In an Input field the text layer itself becomes editable, so typed text keeps the layer's font, color and alignment, and no browser form control is drawn over it. A Textarea field is the browser's own text area, styled after the layer (→ The Textarea behavior).
• The whole instance is the field: a press anywhere on it puts the caret into the text, and a press anywhere outside it leaves the field, as Esc does. Enter leaves an Input field and breaks the line in a Textarea field.
• An Input field takes no line breaks: 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, and it gives way to a new Input value: a Set Component Input action, a variable bound to the input or a Reset action on the field replaces it (→ Reset). A reload brings back Input value.
• With the Input value row bound to a value variable, the binding is two-way: every keystroke writes the variable, and everything bound to that variable follows (→ Two-way binding on controls).

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 reaches the rest of the prototype through a variable only: bind the Input value row (Text on a Textarea) to a value variable, and expressions and Conditional actions read what was typed from the variable (→ Two-way binding on controls). No event fires on typing, on Enter, on focus or on submit (→ Events).

• A form can branch on its fields, checkboxes, toggles, radio buttons, color inputs and sliders through the variables bound to their built-in inputs, for a Conditional.
• A form cannot validate or require a field, or send anything.

The form kit

Eight 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	Bind Input value to a variable: typing writes it (→ Two-way binding)
Textarea	A text field of several lines (→ Textarea)	Bind Text to a variable: typing writes it
Checkbox	An on/off choice that starts at Checked	Bind Checked to a variable, or use a Check event → Set Variable instead, not both
Toggle	The same, with :on and :off states	Bind Checked to a variable, or use a Toggle event → Set Variable instead, not both
Radio button	One choice out of a group	Bind each instance's Selected value to one variable: a click writes its Option value (→ Radio groups)
Button	Hover and pressed feedback	— (its Click event runs the form's actions)
Color input	A color chooser that opens the browser's color picker	Bind Color to a variable: a pick writes it (→ Color input)
Slider	A number picked by dragging a thumb along a track	Bind Value to a variable: dragging writes it (→ Slider)

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.