Rate

Star rating that displays any fractional score read-only, or lets users pick a value with pointer or keyboard.

import { Rate } from '@lobehub/ui/base-ui';

NPM Source Edit

Data Entry

Basic

Loading preview

APIs

Rate properties

allowHalf: boolean
Defaults to false.
character: null | string | number | bigint | false | true | ReactElement<unknown, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<AwaitedReactNode>
color: string
count: number
Defaults to 5.
defaultValue: number
Defaults to 0.
disabled: boolean
Defaults to false.
gap: number
onChange: (value: number) => void
readOnly: boolean
Defaults to false.
ref: null | (instance: HTMLDivElement | null) => void | (() => VoidOrUndefinedOnly) | DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES[keyof DO_NOT_USE_OR_YOU_WILL_BE_FIRED_CALLBACK_REF_RETURN_VALUES] | RefObject<HTMLDivElement | null>
Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).
size: number
Defaults to 20.
value: number

Also accepts all native HTML and ARIA attributes.

readOnly renders role="img" labelled like "4.3 out of 5" and fills any fraction proportionally. Interactive ratings are a role="slider": arrow keys step by 1 (or 0.5 with allowHalf), Home/End jump to 0 and count. gap defaults to half of size; empty stars use colorFill.

Migrating from antd Rate

Display-only disabled → readOnly; disabled now dims the control.
character takes a node only; allowClear, tooltips, keyboard and autoFocus are not supported.
Size and colours are props (size, color) instead of ConfigProvider theme tokens.