rating
Accessible star rating — hover to preview, click to commit.
A star rating exposing WAI-ARIA slider semantics, so half-steps and keyboard
both work cleanly. Hovering previews the value; clicking commits it.
Installation
pnpm add @fluixi-ui/rating
Usage
import { Rating } from '@fluixi-ui/rating';
<Rating defaultValue={3} />
<Rating value={score()} onChange={setScore} allowHalf />
<Rating value={4} readOnly />
Props
| Prop | Type | Description |
|---|---|---|
value |
number |
Controlled value. |
defaultValue |
number |
Uncontrolled initial value (default 0). |
onChange |
(value: number) => void |
Fired when the user picks a rating. |
max |
number |
Number of items (default 5). |
allowHalf |
boolean |
Allow half-step (0.5) selection. |
readOnly |
boolean |
Display the value without allowing changes. |
disabled |
boolean |
Disable interaction and dim the control. |
getValueText |
(value, max) => string |
Custom aria-valuetext. |
children |
(index: number) => JSX.Element |
Render a custom item (star) for the 1-based index. |
Keyboard
| Key | Action |
|---|---|
→ / ↑ |
Increase by one step |
← / ↓ |
Decrease by one step |
Home |
Set to 0 |
End |
Set to max |
Styling
The root is [data-rating]; each star is [data-rating-item] with data-state
(full | half | empty). Override the tokens --flx-ui-rating-size,
--flx-ui-rating-gap, --flx-ui-rating-color, or --flx-ui-star (the star mask
image) to restyle.
Part of the Fluixi UI component library. Made with ☕ by the Fluixi team.