Forms

Rating

Star rating input — interactive or read-only, with optional half stars.

Import

tsx

import { Rating } from "@cooud-ui/ui";

bash

npx cooud-ui add rating

Examples

Interactive

A controlled star rating. Click or use the arrow keys to set the value; the wrapper is a single focusable slider so it stays keyboard- and screen-reader-friendly.

3 stars

tsx

function RatingDemo() {
  const [value, setValue] = useState(3);

  return (
    <div className="flex flex-col items-center gap-3">
      <Rating value={value} onValueChange={setValue} aria-label="Rate your experience" />
      <p className="text-sm text-fg-secondary tabular-nums">
        {value} {value === 1 ? "star" : "stars"}
      </p>
    </div>
  );
}

Read-only with a count

Display an aggregate score with `readOnly` and `allowHalf`, paired with the review count.

4.5 · 1,284 reviews

tsx

<div className="flex items-center gap-2">
  <Rating value={4.5} readOnly allowHalf size="sm" aria-label="Rated 4.5 out of 5" />
  <span className="text-sm text-fg-secondary">4.5 · 1,284 reviews</span>
</div>

API Reference

Generated from the component's exported types.

RatingProps

Extends VariantProps<typeof ratingVariants>

Prop	Type	Default	Description
`value`	`number`	—	Controlled value. Pair with `onValueChange`.
`defaultValue`	`number`	`0`	Initial value for uncontrolled usage. Defaults to `0`.
`onValueChange`	`(value: number) => void`	—	Called with the new value whenever the rating changes.
`max`	`number`	`5`	Number of stars. Defaults to `5`.
`readOnly`	`boolean`	`false`	Renders display-only with no interaction. Defaults to `false`.
`allowHalf`	`boolean`	`false`	Allows half-star (0.5) granularity. Defaults to `false`.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Star size preset. Defaults to `"md"`.
`aria-label`	`string`	—	Accessible name for the rating when there is no visible label.
`aria-labelledby`	`string`	—	ID of an element labelling the rating.
`className`	`string`	—	Extra classes for the wrapper element.