input

binds state

A text field people type into, such as a name, an email, a search, a new item, or with lines= a note or a message. Each keystroke writes its bind= state, and required= and kind=email or number say what's wrong once it's been left.

Spec · edit me

No problems. The parser accepted every line.

Result · try itOpen in playground

Tweak the props"text"placeholder

kind

lines

error

max

500

Props

"text"textThe label above the field. Leave it out only when the screen makes the purpose obvious.optional

bindstateThe state name or path it reads and writes, like task or t.title.required

placeholderstringA hint shown while the field is empty, like e.g. Sunscreen.—

kindtext · email · number · password · searchtext, email, number, password or search. Picks the phone keyboard and autofill; number writes a number, or null while empty. email and number also say when what's typed isn't one.text

linesnumberRows of text, 1 to 12: more than 1 is a box for a note or a message, where Enter starts a new line (on= then runs only from a button).1

requiredconditionWhen true, an empty field says Required once it's been left.—

errorstringYour own message, shown under the field once it's been left, while it isn't empty, e.g. error="{len(pw) < 8 ? 'At least 8 characters' : ''}".—

onactionActions to run when Enter is pressed, after the value is written, e.g. emit:changed. Separate several with ;—

disabledconditionExpression; when true the field is greyed out and can't be typed in.—

maxnumberLongest value in characters (at most 10000; 2000 when lines= is more than 1).500

ifconditionShow only when this expression is true, e.g. if=done or if={count>0}. Every element takes it.—

tipstringA short explanation shown on hover, keyboard focus or a tap, e.g. tip="Orders not yet shipped": for a term or a number some people won't know, instead of more words on screen. It makes the element a Tab stop if it isn't one. Every element takes it.—

For your model

The exact guide entry a model gets for input, generated from the same definition.

  input "<text>"  — A text field people type into, such as a name, an email, a search, a new item, or with lines= a note or a message. Each keystroke writes its bind= state, and required= and kind=email or number say what's wrong once it's been left.
    "<text>"  The label above the field. Leave it out only when the screen makes the purpose obvious.
    bind=<state, required>  The state name or path it reads and writes, like task or t.title.
    placeholder=<string>  A hint shown while the field is empty, like e.g. Sunscreen.
    kind=<text|email|number|password|search>  text, email, number, password or search. Picks the phone keyboard and autofill; number writes a number, or null while empty. email and number also say when what's typed isn't one.
    lines=<number>  Rows of text, 1 to 12: more than 1 is a box for a note or a message, where Enter starts a new line (on= then runs only from a button).
    required=<condition>  When true, an empty field says Required once it's been left.
    error=<string>  Your own message, shown under the field once it's been left, while it isn't empty, e.g. error="{len(pw) < 8 ? 'At least 8 characters' : ''}".
    on=<action>  Actions to run when Enter is pressed, after the value is written, e.g. emit:changed. Separate several with ;
    disabled=<condition>  Expression; when true the field is greyed out and can't be typed in.
    max=<number>  Longest value in characters (at most 10000; 2000 when lines= is more than 1).
    example:
      state task="" todos=[]
      input "New item" bind=task placeholder="e.g. Sunscreen" on="add:todos:{task};set:task:''"
      text "{plural(len(todos), 'item')}" tone=muted

More input

button link check switch radio select date-picker stepper slider segmented menu menu-item

All input elements on one page →