Rating

Star rating as a radio group: arrow keys change the value, each option is announced ("3 of 5 stars").

Import

import { Rating } from '@marbleui/ui'

Props

<Rating>

Prop	Type	Default	Description
defaultValue	`number`	`0`
icon	`'star' \| 'heart'`	`'star'`	star (default) or heart
label	`string`	`—`
max	`number`	`5`
onChange	`(value: number) => void`	`—`
size	`'sm' \| 'md' \| 'lg'`	`'md'`
tone	`'accent' \| 'warning' \| 'danger'`	`'warning'`
value	`number`	`—`

Also accepts React Aria props (92).

Accessibility

Keyboard interaction, focus management and ARIA semantics come from the underlying primitives: React Aria Radio · React Aria RadioGroup. Follow the primitive's docs for the full keyboard map.

Usage notes

Star or heart rating, input or read-only display. For a numeric choice with more range use Slider.

<Rating label="Rate this template" defaultValue={4} onChange={setRating} />
<Rating aria-label="Average rating 4 out of 5" isReadOnly size="sm" defaultValue={4} />

Uncontrolled: defaultValue. Controlled: value + onChange (a number, 0 means none). max defaults to 5.
It is a radio group, so arrow keys change the value. Each option is labelled “n of max”.
isReadOnly disables changes and hover preview. A read-only rating still needs aria-label (or label) that states the value.
icon is star or heart; tone is warning, accent or danger.

Example source · show

import { Rating } from './rating'

export const styles = {
  Stars: () => <Rating label="Rate this template" defaultValue={4} />,
  Sizes: () => (
    <div className="flex flex-col gap-3">
      <Rating aria-label="Small" size="sm" defaultValue={3} />
      <Rating aria-label="Large" size="lg" defaultValue={2} />
    </div>
  ),
  Hearts: () => <Rating label="How much do you love it?" icon="heart" tone="danger" defaultValue={3} />,
  'Read only': () => (
    <div className="flex items-center gap-2 text-sm text-fg-muted">
      <Rating aria-label="Average rating 4 out of 5" isReadOnly size="sm" defaultValue={4} /> 4.0 · 128 reviews
    </div>
  ),
}

Source: packages/ui/src/rating/rating.tsx

Catalog

Category: inputs
Priority: Core
Primitive: composed
React Aria: RadioGroup
Base UI: Radio Group