Rating
Star rating with fractional display, half-star input, hover preview, and keyboard support. Interactive by default; set readonly for display-only.
Default
Interactive 5-star rating with v-model.
Fractional display
Any decimal value renders a partially filled star.
3.7
Half-star input
Click or arrow to the left half of a star for a .5 value.
2.5
Show value
Display the numeric value beside the stars.
4.0
Sizes
sm, default, lg.
Colors
yellow (default), primary, foreground.
Readonly
Display-only, no hover or keyboard.
4.2
Disabled
Dimmed and non-interactive for forms.
API Reference
Props, events, and slots for each sub-component.
Rating
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| modelValue | number | 0 | Current rating. Supports v-model. Fractional values render partial fills. Clamped to [0, max]. |
| max | number | 5 | Number of stars. |
| size | "sm" | "default" | "lg" | "default" | Star and gap size. |
| readonly | boolean | false | Display-only. Disables hover, click and keyboard. |
| disabled | boolean | false | Dimmed and non-interactive. Use in disabled forms. |
| showValue | boolean | false | Render the numeric value next to the stars. |
| allowHalf | boolean | false | Allow half-star selection via pointer position and a keyboard step of 0.5. |
| clearable | boolean | false | Clicking the current value resets the rating to 0. |
| color | "yellow" | "warning" | "primary" | "foreground" | "yellow" | Filled-star color. Default yellow matches the ReUI rating. |
| class | string | undefined | Classes for the root container. |
| starClass | string | undefined | Classes for each star wrapper. |
Events
| Event | Description |
|---|---|
| update:modelValue | Fires on click or keyboard change with the new rating. Enables v-model. With clearable, clicking the current value emits 0. |
Accessibility
Keyboard shortcuts and ARIA behavior.
Keyboard
| Shortcut | Description |
|---|---|
| Tab | Moves focus to or from the rating (interactive only). |
| ArrowRight | Increase rating by one step (0.5 with allowHalf, else 1). |
| ArrowUp | Increase rating by one step. |
| ArrowLeft | Decrease rating by one step. |
| ArrowDown | Decrease rating by one step. |
| Home | Set rating to 0. |
| End | Set rating to max. |
- When interactive, the root uses role="slider" with aria-valuemin, aria-valuemax, aria-valuenow and aria-valuetext (e.g. "3.5 of 5").
- When readonly, the root uses role="img" with an aria-label describing the value.
- Provide an aria-label (e.g. "Product rating") to name the control; it forwards to the root element.
- Stars are aria-hidden; the value is conveyed entirely through ARIA attributes.