Skip to content
fuji-ui
Component

Rating

Icon rating input with radiogroup semantics and arrow-key navigation. The shape and color are configurable, and it supports read-only, disabled, controlled, and custom-max usage.

Sizes

  • Interactive ratings expose radiogroup semantics: Arrow Right/Up increases the value, Arrow Left/Down decreases it, and only one star is a Tab stop at a time (roving tabindex).
  • Fractional values (e.g. 4.8) render a proportionally filled star in both interactive and read-only ratings.

Tones

Filled color resolves through Fuji semantic tokens.

Custom shape

Pass any individually imported Lucide icon.

Custom max

Read-only and disabled

  • readOnly renders a static role="img" with an accessible label like "Rated 4.8 out of 5" - it is not keyboard-focusable and does not expose radiogroup/radio roles, since it isn't an input.
  • disabled keeps the radiogroup semantics (it's still a form control, just temporarily non-interactive) and is removed from the tab order natively via the disabled attribute.

Controlled

3 / 5

API reference

valueNone
number

Controlled rating value.

defaultValue0
number

Uncontrolled initial value.

onChangeNone
(value: number) => void

Fires when the value changes.

max5
number

Number of icons.

size"md"
"sm" | "md" | "lg"

Icon size.

iconStar
LucideIcon

Individually imported Lucide icon for each item.

tone"sun"
ComponentTone

Decorative color of the filled icons.

readOnlyfalse
boolean

Display only; not editable.

disabledfalse
boolean

Dim and disable interaction.

labelNone
string

Accessible name for the radiogroup (required).

classNameNone
string

Additional classes applied to the component root.