Rating
FeedbackAn interactive star rating component. Supports read-only display and configurable max.
Playground
Controls
Current rating.
Number of stars.
Star size.
Non-interactive display.
Disabled state.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
modelValue | number | 0 | Current rating value (v-model). |
max | number | 5 | Total number of stars. |
size | 'sm' | 'md' | 'lg' | 'md' | Star size. |
readonly | boolean | false | Disable interaction (display only). |
disabled | boolean | false | Faded disabled state. |
Examples
Default
vue
<DsRating :modelValue="3" />Full
vue
<DsRating :modelValue="5" />Read only
vue
<DsRating
:modelValue="4"
readonly
/>Small
vue
<DsRating
:modelValue="3"
size="sm"
/>Large
vue
<DsRating
:modelValue="4"
size="lg"
/>Disabled
vue
<DsRating
:modelValue="2"
disabled
/>Skeleton
Use DsRatingSkeleton as a loading placeholder while content is being fetched.
Small
vue
<DsRatingSkeleton size="sm" />Medium
vue
<DsRatingSkeleton size="md" />Large
vue
<DsRatingSkeleton size="lg" />Accessibility
- Uses role="radiogroup" with aria-label.
- Each star is a button with aria-label and aria-pressed.
- Click same star to deselect (toggle to 0).