Rating

half steps

read only

Installation

pnpm dlx shadcn@latest add https://matos-ui.com/r/rating.json

Usage

import { Rating } from '@/components/matos-ui/rating'

const [value, setValue] = useState(3)

<Rating value={value} onValueChange={setValue} />

Examples

Half steps

<Rating defaultValue={3.5} allowHalf />

Read only

<Rating value={4} readOnly />

Inside a form

<form action={submit}>
  <Rating name="score" defaultValue={0} />
  <button type="submit">Send</button>
</form>

The control is a single role="slider" node. Arrow keys move by one step — half a star when allowHalf — and Home / End jump to the ends. Clicking the star the rating already rests on clears it back to 0.

Under prefers-reduced-motion the pop and the sweep are dropped; the fill still changes colour, it just doesn't scale or ripple.

Reference

Rating Props

Prop	Type	Default	Description
`value`	`number`	-	Controlled value (`0`–`max`).
`defaultValue`	`number`	`0`	Initial value when uncontrolled.
`onValueChange`	`(value: number) => void`	-	Fires with the committed rating; `0` when cleared.
`max`	`number`	`5`	Number of stars.
`allowHalf`	`boolean`	`false`	Half-star precision on hover, click and keyboard.
`readOnly`	`boolean`	`false`	Render the stars without interaction.
`disabled`	`boolean`	`false`	Disable interaction and dim the control.
`showValue`	`boolean`	`false`	Print the numeric value next to the stars.
`name`	`string`	-	Name for a hidden input, so the value posts in a form.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Star size preset.