Rating group
A star rating that can be read or set. It supports half values from the click position, an optional clear affordance, any icon pair for the filled and empty layers, a custom number of items, vertical layout, read-only and disabled states, and form submission through a hidden input. Arrow keys step the rating; with allowClear, Delete and Backspace reset it.
Rated 3 of 5.
Installation
Import from the package. Do not run shadcn add in your app.
tsx
import { RatingGroup } from "@carsxe/design-system/components/rating-group"Usage
tsx
import { RatingGroup } from "@carsxe/design-system/components/rating-group"
const [value, setValue] = React.useState(3)
<RatingGroup aria-label="Rate this endpoint" value={value} onValueChange={setValue} />Half values
Clearable
Pick the same star again, or press Delete, to clear.
Custom icons
Item count
Vertical
Read-only and disabled
Inside a form
API Reference
| Prop | Type | Default |
|---|---|---|
| value | number | — |
| defaultValue | number | 0 |
| onValueChange | (value: number) => void | — |
| count | number | 5 |
| allowHalf | boolean | false |
| allowClear | boolean | false |
| icon | ComponentType<{ className?: string }> | — |
| emptyIcon | ComponentType<{ className?: string }> | — |
| orientation | "horizontal" | "vertical" | "horizontal" |
| readOnly | boolean | false |
| disabled | boolean | false |
| name | string | — |