Rating
A star rating input with fractional read-only display, custom icons, sizes, and interactive selection.
Usage
Controlled
Custom Color
Custom Icon Heart
Custom Icon Per Item
Disabled
Product Review
Read Only
Read Only Fractional
Render Function
Sizes
With Label
CSS Classes
Base & Size Classes
.rating- Base rating group container.rating--sm- Small size (no gap, smaller icons).rating--md- Medium size (1px gap, default).rating--lg- Large size (2px gap, larger icons)
Element Classes
.rating__item- Individual rating option.rating__item--sm/.rating__item--md/.rating__item--lg- Item size variants.rating__icon- Icon wrapper (star, heart, etc.).rating__icon-partial- Overlay for fractional read-only display
Interactive States
- Active:
[data-active="true"]on.rating__item(icon turns active color) - Read-only:
[data-readonly="true"]on.rating__item(default cursor, no press scale) - Focus visible:
[data-focus-visible="true"]on.ratingor.rating__item(focus ring) - Pressed:
:activeor[data-pressed="true"]on.rating__item(scale down to 0.8) - Disabled:
[data-disabled="true"]on.ratingor:disabled/[aria-disabled="true"]on.rating__item(reduced opacity)
CSS Variables
--rating-active-color- Color for active/selected stars (default:var(--color-warning))--rating-inactive-color- Color for inactive stars (default:var(--color-surface-tertiary))--rating-partial- Width of the partial overlay for fractional display (set via inline style)
API Reference
Rating
The root component. Wraps RAC RadioGroup in horizontal orientation.
| Prop | Type | Default | Description |
|---|---|---|---|
size | 'sm' | 'md' | 'lg' | 'md' | Size variant |
value | number | - | The current rating value (controlled) |
defaultValue | number | - | The initial rating value (uncontrolled) |
onValueChange | (value: number) => void | - | Handler called when the rating value changes |
icon | ReactNode | - | Custom icon element for all rating items |
Also supports all RAC RadioGroup props except defaultValue, onChange, orientation, and value.
Rating.Item
An individual rating option. Wraps RAC Radio.
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | - | Required. The numeric value for this item |
children | ReactNode | ((props: RatingItemRenderProps) => ReactNode) | - | Custom content or render function |
Also supports all RAC Radio props except children and value.
RatingItemRenderProps
When using the render prop pattern on Rating.Item:
| Property | Type | Description |
|---|---|---|
isActive | boolean | Whether this item is at or below the current rating |
isPartial | boolean | Whether this item shows a partial fill (read-only fractional) |
partialPercent | number | The fill percentage for partial display (0-100) |