segmented

binds state

Two to six short options in one track, one chosen, like Week, Month and Year, or Chart and Table. Show different content for each with if=.

Spec · edit me

No problems. The parser accepted every line.

Result · try itOpen in playground

Tweak the propslabeloptions

Props

bindstateThe state name holding the chosen option's text.required

labelstringWhat the choice is about, read by screen readers, e.g. label="Period". Default: the text just above it.—

optionsstringThe options, comma-separated, e.g. options="Week,Month,Year". At most 6, one or two words each.required

onactionActions to run after the choice changes, 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 segmented, generated from the same definition.

  segmented  — Two to six short options in one track, one chosen, like Week, Month and Year, or Chart and Table. Show different content for each with if=.
    bind=<state, required>  The state name holding the chosen option's text.
    label=<string>  What the choice is about, read by screen readers, e.g. label="Period". Default: the text just above it.
    options=<string, required>  The options, comma-separated, e.g. options="Week,Month,Year". At most 6, one or two words each.
    on=<action>  Actions to run after the choice changes, e.g. emit:changed. Separate several with ;
    example:
      state view="Chart"
      segmented bind=view options="Chart,Table"
      text "Showing the {lower(view)}" tone=muted

More input

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

All input elements on one page →