Rating

The Rating component displays a visual rating scale, allowing users to select or view a rating value. It supports both interactive and read-only modes.

Usage & Examples

Default

default.tsx

  <Rating 
    value={3}
    onChange={(val) => console.log(val)} 
  />

Visual variants

Themes

primary
secondary
tertiary
quaternary

States

success
warning
error
info

Sizes

xs
small
medium
large

Variants

solid
outline
glass
visual-variants.tsx
// Themes

  <Rating theme="primary" 
    value={3}
    onChange={(val) => console.log(val)} 
  />

  <Rating theme="secondary" 
    value={3}
    onChange={(val) => console.log(val)} 
  />

  <Rating theme="tertiary" 
    value={3}
    onChange={(val) => console.log(val)} 
  />

  <Rating theme="quaternary" 
    value={3}
    onChange={(val) => console.log(val)} 
  />

// States

  <Rating state="success" 
    value={3}
    onChange={(val) => console.log(val)} 
  />

  <Rating state="warning" 
    value={3}
    onChange={(val) => console.log(val)} 
  />

  <Rating state="error" 
    value={3}
    onChange={(val) => console.log(val)} 
  />

  <Rating state="info" 
    value={3}
    onChange={(val) => console.log(val)} 
  />

// Sizes

  <Rating size="xs" 
    value={3}
    onChange={(val) => console.log(val)} 
  />

  <Rating size="small" 
    value={3}
    onChange={(val) => console.log(val)} 
  />

  <Rating size="medium" 
    value={3}
    onChange={(val) => console.log(val)} 
  />

  <Rating size="large" 
    value={3}
    onChange={(val) => console.log(val)} 
  />

// Variants

  <Rating variant="solid" 
    value={3}
    onChange={(val) => console.log(val)} 
  />

  <Rating variant="outline" 
    value={3}
    onChange={(val) => console.log(val)} 
  />

  <Rating variant="glass" 
    value={3}
    onChange={(val) => console.log(val)} 
  />

Props API

19 props
Columns
Rating props API
Default
Description
aria-describedbystringNoaria—References the id of an element that describes the rating group.
aria-labelstringNoaria—Accessible label for the rating group. Prefer `label` when a visible label is needed.
aria-labelledbystringNoaria—References the id of an element that labels the rating group.
classNamestringNostyling—Optional additional CSS class names for custom styling.
data-testidstringNotesting—Backward-compatible alias for test ID attributes.
idstringNoprops—Optional unique id for the rating group.
interactivebooleanNopropstrueIf true, the user can interact with the rating (hover, click, keyboard navigation).
labelstringNoprops—Visible label for the rating component.
maxnumberNoprops5The maximum number of stars available for the rating.
onChange((rating: number) => void)Noevents—Callback function invoked when the rating changes. Receives the new rating (1-indexed) as its argument.
readOnlybooleanNopropsfalseIf true, the rating is read-only and cannot be changed.
requiredbooleanNopropsfalseIf true, marks the field as required.