A React star rating input with fractional read-only values, custom icons, sizes, and selection.
Import the Rating component and access all parts using dot notation.
import {Rating} from "@heroui-pro/react";
<Rating>
<Rating.Item />
</Rating>.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).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[data-active="true"] on .rating__item (icon turns active color)[data-readonly="true"] on .rating__item (default cursor, no press scale)[data-focus-visible="true"] on .rating or .rating__item (focus ring):active or [data-pressed="true"] on .rating__item (scale down to 0.8)[data-disabled="true"] on .rating or :disabled / [aria-disabled="true"] on .rating__item (reduced opacity)--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)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.
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.
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) |