Skip to content

Rating

InputMIT
View in Storybook

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

bun add @otfdashkit/ui

Preview

Rating
Loading Storybook preview…

Code

import { 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.

See the kit

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).