Component
Rating
Collects or displays a star rating with radio-group semantics.
Install
Run the CLI to copy the source into your project.
pnpm dlx @stalk-ui/cli add @stalk-ui/ratingExamples
Live previews render through the docs app's PandaCSS codegen.
<Rating aria-label="Quality" defaultValue={3} />
<Rating aria-label="Vendor score" readOnly value={4} />
Props
Public component props extracted from the source TypeScript types.
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
| `value` | `number` | No | - | Current rating (controlled). |
| `defaultValue` | `number` | No | - | - |
| `onChange` | `(value: number) => void` | No | - | - |
| `max` | `number` | No | - | Number of items (default 5). |
| `readOnly` | `boolean` | No | - | - |
| `disabled` | `boolean` | No | - | - |
| `size` | `RatingSize` | No | - | - |
| `'aria-label'` | `string` | No | - | Accessible name for the radio group. |
| `itemLabel` | `(value: number) => string` | No | - | Accessible per-item label; receives the 1-based value. |
Variants
Variant axes exposed by the underlying PandaCSS recipe or slot recipe.
| Variant | Values |
|---|---|
| `size` | `sm`, `md`, `lg` |
Registry
Files this component contributes to your registry install.
- Manifest: `/r/rating.json`
- Recipe: `rating`
- Files: `src/components/ui/rating.tsx`