rating

binds state

A star rating. Shows value= as stars, or with bind= lets the user pick a rating.

Spec · edit me

No problems. The parser accepted every line.

Result · try itOpen in playground

Tweak the props

value

4.5

max

label

Props

valuenumberThe rating to show, e.g. 4.5. Ignored when bind= is set.—

maxnumberHow many stars (default 5).5

bindstateA number state the user sets by pressing a star.—

labelstringWhat's being rated, read by screen readers, e.g. label="Your rating". Default: the text just above it.—

onactionActions to run after the user picks a rating, 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 rating, generated from the same definition.

  rating  — A star rating. Shows value= as stars, or with bind= lets the user pick a rating.
    value=<number>  The rating to show, e.g. 4.5. Ignored when bind= is set.
    max=<number>  How many stars (default 5).
    bind=<state>  A number state the user sets by pressing a star.
    label=<string>  What's being rated, read by screen readers, e.g. label="Your rating". Default: the text just above it.
    on=<action>  Actions to run after the user picks a rating, e.g. emit:changed. Separate several with ;
    example:
      state stars=4
      rating value=4.5
      rating bind=stars

More data

stat chart chart-line chart-rule chart-note meter table table-column compare compare-row details detail schedule board tree flow map pin

All data elements on one page →