Rate

Star rating with half-step support, keyboard navigation, and four built-in symbols (star, heart, thumb, bolt). Pass any node via icon for a custom shape.

3.5

Usage

import { Rate } from '@bwo-ui/react';

const [value, setValue] = useState(3.5);

<Rate value={value} onValueChange={setValue} allowHalf />

// Custom symbol
<Rate defaultValue={4} icon="heart" color="var(--bwo-red)" />

// Read-only display
<Rate value={4.2} allowHalf readOnly showValue />

Custom icon

<Rate
  defaultValue={3}
  icon={
    <svg viewBox="0 0 24 24" fill="currentColor">
      <path d="M12 2 …" />
    </svg>
  }
/>

Props

PropTypeDefaultDescription
valuenumber—Controlled rating (0..count, with halves if allowHalf).
defaultValuenumber0Initial uncontrolled rating.
onValueChange(value: number) => void—Called when the user clicks or uses keyboard nav.
countnumber5Total number of icons.
allowHalfbooleanfalseEnable 0.5 increments.
icon'star' | 'heart' | 'thumb' | 'bolt' | ReactNode'star'Built-in symbol or custom node.
emptyIconReactNode—Override the background (empty) icon — defaults to a faded copy of `icon`.
size'sm' | 'md' | 'lg''md'Icon size preset.
colorstring—Override the fill color (any valid CSS color).
readOnlyboolean—Disable interaction; keep visual brightness.
disabledboolean—Disable interaction and dim the icons.
clearableboolean—Clicking the current value clears it to 0.
showValueboolean—Render the numeric value beside the icons.
namestring—Emit a hidden input with the current value.

Keyboard