<arc-rating> Overview
Guidelines
When to use
- Use Rating for collecting subjective scores like product reviews, satisfaction, or difficulty levels
- Set `readonly` when displaying an existing rating that the user should not change
- Pair Rating with a numeric label or text description (e.g. "4 out of 5") for added clarity
- Use the default `max="5"` for most use cases -- it is the most universally understood scale
- Listen to `arc-change` to update your form state or submit the rating value
When not to use
- Do not use Rating for binary choices -- use Toggle or Checkbox instead
- Do not set `max` higher than 10 -- too many stars become hard to distinguish at a glance
- Do not use Rating for precise numeric input -- use Slider or Number Input for exact values
- Do not rely on colour alone to distinguish filled and unfilled states -- the SVG fill style also differs
- Avoid placing Rating components too close together without labels -- users may confuse which rating applies to which item
Features
- Filled stars in accent-primary with `drop-shadow` glow; unfilled stars rendered as outlined SVG paths
- Hover preview: stars scale up to 1.15x and fill with accent colour up to the hovered position
- Configurable `max` prop to support rating scales beyond the default 5 stars
- ARIA `slider` role with `aria-valuenow`, `aria-valuemin`, and `aria-valuemax` for screen readers
- Full keyboard navigation: Arrow keys step the value, Home/End jump to min/max
- Separate `disabled` (dimmed, no interaction) and `readonly` (full appearance, no interaction) modes
- Single tab stop for the entire star group, with internal arrow-key navigation
- Fires `arc-change` on click or keyboard selection with `{ value }` in the event detail
Preview
Usage
This component requires JavaScript. No pure HTML/CSS version is available — use the Web Component directly or a framework wrapper.
<arc-rating value="3" max="5"></arc-rating>import { Rating } from '@arclux/arc-ui-react';
<Rating value={3} max={5} /><script setup>
import { Rating } from '@arclux/arc-ui-vue';
</script>
<template>
<Rating :value="3" :max="5" />
</template><script>
import { Rating } from '@arclux/arc-ui-svelte';
</script>
<Rating value={3} max={5} />import { Component } from '@angular/core';
import { Rating } from '@arclux/arc-ui-angular';
@Component({
imports: [Rating],
template: `
<Rating [value]="3" [max]="5"></Rating>
`,
})
export class MyComponent {}import { Rating } from '@arclux/arc-ui-solid';
<Rating value={3} max={5} />import { Rating } from '@arclux/arc-ui-preact';
<Rating value={3} max={5} />API
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | 0 | Current rating value. Reflected as an attribute and updated on user interaction. |
max | number | 5 | Maximum number of stars to render. Determines the upper bound of the rating scale. |
disabled | boolean | false | Disables interaction, reducing opacity to 40% and blocking pointer events. |
readonly | boolean | false | Prevents interaction while maintaining full visual appearance. Useful for displaying existing ratings. |
Events
| Event | Description |
|---|---|
arc-change | Fired when the rating value changes |