select

binds state

A field that opens a list to pick one option from, for choices like a department, status or filter; compact where radio buttons would take too much room. bind= holds the chosen option's value; with multiple=true, a list of the chosen values, for filters like regions to show.

Spec · edit me

No problems. The parser accepted every line.

Result · try itOpen in playground

Tweak the props"text"

multiple

placeholder

Props

"text"textThe label above the field.optional

itemsexpressionThe options: a list of records, or of text or numbers. At most 200.required

valuenameFor records, the field holding each option's value (text or a number), e.g. value=id. Options without one, or repeating one, are left out.—

labelnameFor records, the field shown for each option, e.g. label=name. Default: the value.—

bindstateState that holds the chosen value, like department or t.status.required

multiplebooleanPick several options: bind= holds a list of their values, starting from a list in state like regions=["West", "East"] (or [] for none), and the list stays open while choosing. filter(sales, 'region', regions) keeps the items whose field is any chosen value; an empty list keeps none, so show everything then: {len(regions) ? filter(sales, 'region', regions) : sales}.false

placeholderstringShown while nothing (or a value no option has) is chosen.Choose…

unavailablenameA field that, when true, greys an option out so it can't be chosen, e.g. unavailable=full.—

disabledconditionExpression; when true the field is greyed out and doesn't open.—

onactionActions to run after an option is chosen, with bind= already set, e.g. emit:changed. Separate several with ;—

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 select, generated from the same definition.

  select "<text>"  — A field that opens a list to pick one option from, for choices like a department, status or filter; compact where radio buttons would take too much room. bind= holds the chosen option's value; with multiple=true, a list of the chosen values, for filters like regions to show.
    "<text>"  The label above the field.
    items=<expression, required>  The options: a list of records, or of text or numbers. At most 200.
    value=<name>  For records, the field holding each option's value (text or a number), e.g. value=id. Options without one, or repeating one, are left out.
    label=<name>  For records, the field shown for each option, e.g. label=name. Default: the value.
    bind=<state, required>  State that holds the chosen value, like department or t.status.
    multiple=<boolean>  Pick several options: bind= holds a list of their values, starting from a list in state like regions=["West", "East"] (or [] for none), and the list stays open while choosing. filter(sales, 'region', regions) keeps the items whose field is any chosen value; an empty list keeps none, so show everything then: {len(regions) ? filter(sales, 'region', regions) : sales}.
    placeholder=<string>  Shown while nothing (or a value no option has) is chosen.
    unavailable=<name>  A field that, when true, greys an option out so it can't be chosen, e.g. unavailable=full.
    disabled=<condition>  Expression; when true the field is greyed out and doesn't open.
    on=<action>  Actions to run after an option is chosen, with bind= already set, e.g. emit:changed. Separate several with ;
    example:
      state teams=[{id: "eng", name: "Engineering"}, {id: "sales", name: "Sales"}] team=""
      select "Team" items=teams value=id label=name bind=team placeholder="Choose a team"

More input

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

All input elements on one page →