VelinStyle Rating 1.2.2
The <velin-rating> component renders an accessible star rating as a radiogroup. Use the value attribute for the current score. Added in 0.7.5. Deutsch: Bewertung
Maturity: Documented as stable in VelinStyle 1.2.0. Design Intelligence (plan / review / agent meta) is separate and beta / foundation where noted.
When to use
- Star (or similar) ratings with
<velin-rating>for reviews and feedback. - When users need to pick or view a score on a fixed scale.
When not
- Binary on/off preferences — use a checkbox or switch pattern.
- Multi-option filters — use Chip or Segmented control.
Example
<velin-rating value="4" aria-label="Rating"></velin-rating>Import
Load the bundle once, then use the custom element in your markup:
<script type="module" src="../../dist/velinstyle-components.min.js"></script>
<velin-rating>…</velin-rating>Accessibility
- Expose the control as an operable group with a clear accessible name (follow the examples on this page).
- Keyboard users should be able to change the value without relying on hover alone.