║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║

---

title: Rating description: An accessible rating component that allows users to provide star ratings with support for half values, keyboard navigation, and form integration. preview: true links: api: /docs/components/rating#api-reference

<ComponentTabs name="rating-demo" />

Installation

CLI

npx shadcn@latest add "https://diceui.com/r/rating"

Manual

<Steps> <Step> Install the following dependencies:

 ```package-install
 @radix-ui/react-slot lucide-react
 ```

</Step> <Step> Copy the refs composition utilities into your `lib/compose-refs.ts` file.

<ComponentSource name="compose-refs" />

</Step> <Step> Copy the visually hidden input component into your `components/visually-hidden-input.tsx` file.

<ComponentSource name="visually-hidden-input" />

</Step> <Step> Copy and paste the following code into your project.

<ComponentSource name="rating" />

</Step> </Steps>

Layout

Import the parts, and compose them together.

import * as Rating from "@/components/ui/rating";

<Rating.Root>
  <Rating.Item />
</Rating.Root>

Examples

Themes

Customize the rating component with different colors and icons.

<ComponentTabs name="rating-themes-demo" />

Controlled

Control the rating value with state.

<ComponentTabs name="rating-controlled-demo" />

With Form

Integrate the rating component with form validation.

<ComponentTabs name="rating-form-demo" />

API Reference

Root

The main container component for the rating.

<AutoTypeTable path="./types/docs/rating.ts" name="RootProps" />

<DataAttributesTable attributes={[ { title: "[data-disabled]", value: "Present when disabled", }, { title: "[data-readonly]", value: "Present when readonly", }, { title: "[data-orientation]", value: ["horizontal", "vertical"], }, ]} />

Item

Individual rating item (star) component.

<AutoTypeTable path="./types/docs/rating.ts" name="ItemProps" />

<DataAttributesTable attributes={[ { title: "[data-disabled]", value: "Present when disabled", }, { title: "[data-readonly]", value: "Present when readonly", }, { title: "[data-state]", value: ["empty", "partial", "full"], }, { title: "[data-hovered]", value: "Present when hovered", }, ]} />

Accessibility

Keyboard Interactions

<KeyboardShortcutsTable shortcuts={[ { keys: ["ArrowLeft", "ArrowRight"], description: "Navigate between rating items.", }, { keys: ["Home"], description: "Move to the first rating item.", }, { keys: ["End"], description: "Move to the last rating item.", }, { keys: ["Enter", "Space"], description: "Activate the focused rating item (when activationMode is 'manual').", }, { keys: ["Escape"], description: "Clear the rating (when clearable is true).", }, ]} />

║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║
║