Skip to content
FormBrowse form components
ComponentsFormNew in 0.2

Rating

Star rating control with hover scale and aria-checked semantics.

Live preview

Usage

Adapters:React stableVue stable
index.html
<div class="lm-rating" role="radiogroup">
  <button class="lm-rating-star" aria-checked="true">★</button>
  <button class="lm-rating-star" aria-checked="false">★</button>
</div>

CSS classes (2)

ClassDescription
lm-ratingInline-flex container
lm-rating-starEach star button; aria-checked='true' = filled

React props (2)

PropTypeDefaultDescription
valuenumberFilled stars 0–max
maxnumber5

Accessibility

  • Use role='radiogroup' + role='radio' on stars; arrow-key navigation.

Spotted something wrong? Edit this entry on GitHub.