Rating
InputMITInteractive 0..N star rating with half-step support and full keyboard control.
bun add @otfdashkit/ui
Preview
RatingInput
Loading Storybook preview…
Code
@otfdashkit/uiimport { useState } from 'react'
import { Rating } from '@otfdashkit/ui'
export function Example() {
const [value, setValue] = useState(3)
return (
<div className="flex flex-col gap-3">
<Rating value={value} onValueChange={setValue} />
<p className="font-mono text-xs text-muted-foreground">value: {value}</p>
</div>
)
}
Free with the SDK. This component ships in @otfdashkit/ui under the MIT license.
Kit for this component
Arcade Kit$99
Show star ratings on products, reviews or content.
Props
Props declared in the Rating source. Inherited HTML attributes are not listed.
| Prop | Type | Default | Description |
|---|---|---|---|
| allowHalf | boolean | true | Allow 0.5 increments. Default true. |
| aria-label | string | 'Rating' | Accessible label. Default "Rating". |
| defaultValue | number | (readonly string[] & number) | 0 | Uncontrolled initial value. |
| emptyIcon | ReactNode | Override empty-state icon. | |
| filledIcon | ReactNode | Override filled-state icon. | |
| max | number | 5 | Maximum stars. Default 5. |
| onValueChange | (value: number) => void | Fires on user change. | |
| readOnly | boolean | false | Disable interaction (display-only). |
| size | 'sm' | 'lg' | 'md' | 'md' | Star size. Default 'md'. |
| value | number | Controlled value (0..max, supports halves like 3.5). |