Skip to content
OTF Kit logoOTF Kit

Rating

Input

Interactive 0..N star rating with half-step support and full keyboard control.

View in Storybook
Rating
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.

PropTypeDefaultDescription
allowHalfbooleantrueAllow 0.5 increments. Default true.
aria-labelstring'Rating'Accessible label. Default "Rating".
defaultValuenumber | (readonly string[] & number)0Uncontrolled initial value.
emptyIconReactNodeOverride empty-state icon.
filledIconReactNodeOverride filled-state icon.
maxnumber5Maximum stars. Default 5.
onValueChange(value: number) => voidFires on user change.
readOnlybooleanfalseDisable interaction (display-only).
size'sm' | 'lg' | 'md''md'Star size. Default 'md'.
valuenumberControlled value (0..max, supports halves like 3.5).

Related