Rating

Whole-step rating input — five stars by default. Built as a native radiogroup so screen readers and keyboard arrow keys behave like any radio set. Filled state swaps between paired icon variants (star ↔ star-filled, also heart, thumbs-up). Hover preview, sizes, and read-only / disabled states ship out of the box.

a11y (built in): every item is a real <input type="radio"> sharing one name, hidden with opacity: 0 rather than removed, so arrow-key roving, the single tab stop and form submission stay native and the glyphs ride along as aria-hidden decoration. Names are generated: each input gets an aria-label (3 stars, or the humanised icon name in select mode) and the group's aria-label is rewritten to Rating: 3 of 5 on every change — a consumer-supplied label is left untouched. Interactive ratings are role="radiogroup"; data-lb-readonly switches to role="img" with the value in the label and disables the inputs (out of tab order), and prefers-reduced-motion drops the hover scale.

Usage: Add data-lb-rating to a wrapper div. Configure with data-lb-value, data-lb-count, data-lb-icon, data-lb-size, data-lb-readonly, data-lb-disabled, data-lb-mode, data-lb-icons, data-lb-clearable and data-lb-name. Fires lb-rating-change with {value}.

Default — five stars, interactive

Click or use Tab → arrow keys to set a rating. The chosen star and all preceding stars fill.

With initial value

Set data-lb-value to seed the input.

Sizes

Three sizes — same scale as buttons and form inputs.

Custom count — data-lb-count

Three-point scale for binary-ish feedback, ten-point scale for NPS-style surveys.

Custom icon — data-lb-icon

Pair an icon name like heart — the component swaps to the matching -filled variant on activation. Same cumulative behaviour as stars.

Pick one — data-lb-mode="select"

Switch to select mode and supply data-lb-icons (CSV). Each item gets its own glyph and only the chosen one highlights — perfect for thumbs-up/down feedback or any radio-style "pick one of these" question.

Toggle — data-lb-clearable

Add data-lb-clearable so clicking the currently-selected item clears it. Combined with data-lb-count="1" and a paired icon like heart, you get a one-click like / unlike toggle. Works in any mode — handy for cumulative ratings where users want to remove their score.

Emoji satisfaction (CSAT)

Five-face survey scale (worst → best) reusing the bundled angry, frown, meh, smile, laugh icons. The selected face swaps to a filled variant — a soft tinted circle behind the features — so the active state reads clearly while keeping eyes and mouth recognisable.

Read-only — display only

Add data-lb-readonly for compact display in lists, cards, and review summaries. Pair with a value text span for the numeric form.

Disabled

Use when the field is part of a form that is read-only or pending some other state. Hover and click are disabled; visual is dimmed.

In a form

The component renders native radio inputs internally. Set data-lb-name so they submit under that name. Output below updates live to demonstrate the lb-rating-change event.