radio

binds state

One choice among several. Give each radio in a group the same bind= and its own value=.

Spec · edit me

No problems. The parser accepted every line.

Result · try itOpen in playground

Tweak the props"text"value

Props

"text"textThe label for this choice.required

bindstateThe state name the group shares; it holds the chosen value.required

valuestringWhat bind= is set to when this radio is chosen.required

onactionActions to run after it is chosen, 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 radio, generated from the same definition.

  radio "<text>"  — One choice among several. Give each radio in a group the same bind= and its own value=.
    "<text>" (required)  The label for this choice.
    bind=<state, required>  The state name the group shares; it holds the chosen value.
    value=<string, required>  What bind= is set to when this radio is chosen.
    on=<action>  Actions to run after it is chosen, e.g. emit:changed. Separate several with ;
    example:
      state size=m
      radio "Small" bind=size value=s
      radio "Medium" bind=size value=m
      radio "Large" bind=size value=l

More input

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

All input elements on one page →