Rating
An accessible rating component that allows users to provide star ratings with support for half values, keyboard navigation, and form integration.
Installation
pnpm dlx shadcn@latest add "@diceui/rating"Layout
Import the parts and compose them together.
import { Rating, RatingItem } from "@/components/ui/rating";
return (
<Rating>
<RatingItem />
</Rating>
)Examples
Themes
Customize the rating component with different colors and icons.
Controlled State
Control the rating value with state.
With Form
Integrate the rating component with form validation.
API Reference
Rating
The main container component for the rating.
Prop
Type
| Data Attribute | Value |
|---|---|
[data-disabled] | Present when disabled |
[data-readonly] | Present when readonly |
[data-orientation] | "horizontal" | "vertical" |
RatingItem
Individual rating item (star) component.
Prop
Type
| Data Attribute | Value |
|---|---|
[data-disabled] | Present when disabled |
[data-readonly] | Present when readonly |
[data-state] | "empty" | "partial" | "full" |
[data-hovered] | Present when hovered |
Accessibility
Keyboard Interactions
| Key | Description |
|---|---|
| ArrowLeftArrowRight | Navigate between rating items. |
| Home | Move to the first rating item. |
| End | Move to the last rating item. |
| EnterSpace | Activate the focused rating item (when activationMode is 'manual'). |