Rating
InputInteractive 0..N star rating with half-step support and full keyboard control.
RatingInput · Web
Loading Storybook preview…
Installation
bun add @otfdashkit/ui
Usage
Import Rating from @otfdashkit/ui.
Code
// Rating — Interactive 0..N star rating with half-step support and full keyboard control.
//
// Install:
// bun add @otfdashkit/ui
import { Rating } from '@otfdashkit/ui'
export function Example() {
return (
<Rating>
{/* your content */}
</Rating>
)
}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). |