Import

1import { Rating } from "packages/ui/src";

Props

RatingProps

Prop	Type	Required
`value`	`number`	No
`max`	`number`	No
`onChange`	`(value: number) => void, showValue?: boolean, label?: string, disabled?: boolean`	No

Examples

Rating

Star rating input with hover preview, numeric display, and disabled state.

Interactive

Quality

Selected: 3 / 5

Read-only

ExcellentGoodAverageBelow AveragePoor

Custom Max (10 stars)

Score

Disabled

Locked

Metadata

Component Metadata

Familyfeedback

FrameworksNext.js, Astro/EmDash

DescriptionStar rating component with interactive selection, hover preview, numeric value display, and disabled state. Token-driven star colors, sizes, and opacity.

Props

RatingProps (value?: number, max?: number, onChange?: (value: number) => void, showValue?: boolean, label?: string, disabled?: boolean)

Statesempty, partial, full, hover, disabled

A11y

Container has role=group with aria-label
Each star is a button with aria-label
Stars use aria-pressed for current value
Disabled buttons prevent interaction

Responsive

Inline-flex by default
Stars wrap naturally

Motion

Fill color transition on hover (0.15s)

Token Dependencies

components.rating.starSize
components.rating.gap
components.rating.filledColor
components.rating.emptyColor
components.rating.hoverColor
components.rating.labelColor
components.rating.labelFontSize
components.rating.valueColor
components.rating.valueFontSize
components.rating.disabledOpacity

Content Slotslabel (string), value display (numeric)

CMS Bindings

Rating value from CMS field
Label from CMS data

Test Cases

Renders 5 stars by default
Has role=group
Shows label text
Filled stars have filled class
Empty stars lack filled class
Shows numeric value when showValue
Disabled adds disabled class
Passes className through