Rating
Accessible star rating covering: interactive star rating, half-star mode, keyboard nav, read-only display, multiple color themes.
Live Preview
Interact with the Rating component in real time. Toggle half-star precision, switch color themes, or flip into read-only mode.
Current value: 3.5
1<Rating2 value={3.5}3 size="md"4 color="default"5 allowHalf6 showValue7 label="Rate this product"8 onChange={(value) => setValue(value)}9/>Installation
Install the Aidash Components package using your preferred package manager.
$ pnpm add @aidash/componentsImport
Import the Rating component into your file.
import { Rating } from '@/components/aidash/rating';Basic Usage
A controlled Rating with integer precision. Click any star to commit that value.
You rated: 0 stars
1const [value, setValue] = useState(0);2 3<Rating value={value} onChange={setValue} />4<p>You rated: {value} stars</p>Half-Star Precision
Enable half-star ratings via allowHalf. Pointer position relative to the star midpoint decides the committed value; keyboard arrows step by 0.5.
You rated: 3.5
1const [value, setValue] = useState(3.5);2 3<Rating value={value} onChange={setValue} allowHalf showValue />Read-Only
Display-only mode with role="img" and a descriptive aria-label. Not focusable and no pointer interaction.
1<Rating value={4} readOnly showValue label="Product rating" />2<Rating value={2.5} readOnly allowHalf showValue label="Average rating" />Sizes
Four sizes to fit different layout densities.
1<Rating value={4} size="sm" />2<Rating value={4} size="md" />3<Rating value={4} size="lg" />4<Rating value={4} size="xl" />Colors
Four semantic color themes for the star fill: amber default, brand, warning, and success.
1<Rating value={4} color="default" />2<Rating value={4} color="brand" />3<Rating value={4} color="warning" />4<Rating value={4} color="success" />With Value
Enable showValue to render a numeric summary next to the stars.
<Rating value={4.5} allowHalf showValue />
<Rating
value={3.5}
allowHalf
showValue
formatValue={(v, m) => `${v.toFixed(1)} out of ${m}`}
/>Custom Max
Render any number of stars via the max prop. Keyboard nav, hover preview, and aria-valuemax all follow.
You rated: 7 / 10
const [value, setValue] = useState(7);
<Rating value={value} onChange={setValue} max={10} showValue />Disabled State
Disabled ratings are dimmed, non-interactive, and skipped from the tab order.
1<Rating value={0} disabled />2<Rating value={3} disabled showValue />Accessibility
Wired to the WAI-ARIA slider pattern when interactive, and the img pattern when read-only.
Slider vs. Image role
Interactive ratings use role="slider" and a single focusable element with roving tabindex. Read-only ratings use role="img" with a descriptive aria-label.
aria-valuenow & aria-valuetext
The slider exposes aria-valuemin="0",aria-valuemax={max},aria-valuenow, and a human-friendlyaria-valuetext (customizable via formatValue).
Keyboard Navigation
Left / Right step the value (0.5 with allowHalf, 1 otherwise),Home jumps to 0, andEnd jumps to max.
Hover Preview Never Commits
Hovering over a star renders the previewed rating visually but does not fire onChange. The value is only committed on click or keyboard interaction, matching mouse and touch input expectations.
1{/* Interactive: renders <div role="slider" aria-valuemin={0} aria-valuemax={5} aria-valuenow={value} /> */}2<Rating value={value} onChange={setValue} allowHalf label="Rate this article" />3 4{/* Read-only: renders <div role="img" aria-label="Rated 4.5 out of 5 stars" /> */}5<Rating value={4.5} readOnly allowHalf />API Reference
Complete list of props for the Rating component.
| Prop | Type | Default | Description |
|---|---|---|---|
| value | number | 0 | Controlled rating value. When omitted, the component manages its own state internally. |
| onChange | (value: number) => void | — | Called when the committed value changes via click or keyboard. |
| max | number | 5 | Maximum rating (number of stars rendered). |
| size | 'sm' | 'md' | 'lg' | 'xl' | 'md' | Visual size of each star. |
| color | 'default' | 'brand' | 'warning' | 'success' | 'default' | Fill color theme for filled and hovered stars. |
| allowHalf | boolean | false | Enable half-star precision from pointer geometry and keyboard steps of 0.5. |
| allowClear | boolean | false | Clicking the currently-selected value again resets the rating to 0. |
| readOnly | boolean | false | Display-only mode: renders as role="img" without focus, pointer, or keyboard handlers. |
| disabled | boolean | false | Disable interaction and dim the component. |
| label | string | — | aria-label when interactive, visible label rendered before the stars when read-only. |
| showValue | boolean | false | Render a "3.5 / 5" summary next to the stars. |
| formatValue | (value: number, max: number) => string | — | Custom formatter for the value summary and aria-valuetext. |
| className | string | '' | Additional CSS classes applied to the outer wrapper. |
allowHalf is enabled, half-star hits are decided by pointer geometry: each star's bounding box is split at its horizontal midpoint. A pointer landing on the left half commits index + 0.5, and the right half commits index + 1.Related
Other components that work well alongside Rating.