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 UI 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

Prop	Type	Default	Description
label *	string	None	Accessible name for the group, e.g. "Rate this product".
className	string	None	Extra classes merged onto the group.
defaultValue	number	0	Starting rating when uncontrolled.
disabled	boolean	None	Greys the control out and blocks input, while keeping it in the tab order's logic.
icon	IconComponent	Star	Icon used for each item - any Lucide (or compatible SVG) component. Pass an individually imported component (default Star).
max	number	5	How many icons to render.
onChange	((value: number) => void)	None	Called with the whole-number rating the user picked.
readOnly	boolean	None	Renders a static `role="img"` named with the score instead of radios. Use it to display a rating (e.g. an average) rather than collect one.
size	ComponentSize	"md"	Icon size, matching the control scale used elsewhere.
tone	ComponentTone	"sun"	Color of the filled icons, resolved through Fuji tokens. Default "sun".
value	number	None	Controlled rating. Fractional values render a partially filled icon.

label *None

string

Accessible name for the group, e.g. "Rate this product".

classNameNone

string

Extra classes merged onto the group.

defaultValue0

number

Starting rating when uncontrolled.

disabledNone

boolean

Greys the control out and blocks input, while keeping it in the tab order's logic.

iconStar

IconComponent

Icon used for each item - any Lucide (or compatible SVG) component. Pass an individually imported component (default Star).

max5

number

How many icons to render.

onChangeNone

((value: number) => void)

Called with the whole-number rating the user picked.

readOnlyNone

boolean

Renders a static `role="img"` named with the score instead of radios. Use it to display a rating (e.g. an average) rather than collect one.

size"md"

ComponentSize

Icon size, matching the control scale used elsewhere.

tone"sun"

ComponentTone

Color of the filled icons, resolved through Fuji tokens. Default "sun".

valueNone

number

Controlled rating. Fractional values render a partially filled icon.

Coding agents read this reference, with its examples, from the version your project has installed, through the Fuji UI MCP server. Set up your agent