Rating
A star-rating input for reviews and feedback forms, with hover preview and keyboard support.
API
All inputs and configuration options for zyra-rating.
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | 0 | Current rating value |
max | number | 5 | Number of stars to render |
size | 'sm' | 'md' | 'lg' | 'md' | Physical size of the stars |
readonly | boolean | false | Disables interaction, for display only |
disabled | boolean | false | Disables interaction and dims the control |
Tokens
CSS custom properties zyra-rating reads at runtime — override any of these in your own stylesheet after @use 'zyra-ng-ui'; to restyle it without touching the component itself.
| Token | Default points to | Description |
|---|---|---|
Unfilled star--zyra-color-border-strong-color | var(--zyra-color-border-strong) | Color of an unfilled star. |
Filled star--zyra-color-warning-foreground | var(--zyra-color-warning) | Color of a filled/hovered star. |
Focus ring--zyra-color-primary | var(--zyra-color-accent) | Outline color when a star is keyboard-focused. |
Accessibility
Built to meet WCAG 2.0 AA. These notes cover the key ARIA, keyboard, and interaction behaviours.
- Container uses role="radiogroup"; each star is role="radio" with aria-checked
- Arrow Left/Down and Right/Up adjust the value by one star