Rating

Star rating component. Hover preview shows the prospective rating before clicking. Supports read-only (non-interactive) and disabled modes.

Preview

Open Sandbox

Usage


import { Rating } from '@wire-ui/react'
 
// Interactive
<Rating defaultValue={3} max={5} onChange={(v) => console.log(v)} />
 
// Controlled
<Rating value={rating} onChange={setRating} />
 
// Read-only (renders as role="img")
<Rating value={4} readOnly />
 
// Disabled
<Rating value={2} disabled />

Props

Prop	Type	Default	Description
`value`	`number`	—	Controlled rating value
`defaultValue`	`number`	`0`	Initial value for uncontrolled use
`onChange`	`(value: number) => void`	—	Called when rating changes
`max`	`number`	`5`	Total number of stars
`readOnly`	`boolean`	`false`	Non-interactive; renders `role="img"`
`disabled`	`boolean`	`false`	Disables interaction

Star data attributes

Attribute	When present
`data-filled`	This star is at or below the current rating
`data-hover`	Mouse is hovering this star (hover preview)