Concepts

Application

Buttons

Data display

Disclosure

Feedback

Layout

Media

Navigation

Overlay

Typography

Utilities

Rating

Used to show reviews and ratings in a visual format.

Recipe

import { RatingGroup } from '@chakra-ui/react'

export const RatingBasic = () => {
  return (
    <RatingGroup.Root count={5} defaultValue={3} size="sm">
      <RatingGroup.HiddenInput />
      <RatingGroup.Control />
    </RatingGroup.Root>
  )
}

Anatomy

import { RatingGroup } from '@chakra-ui/react'

<RatingGroup.Root>
  <RatingGroup.Label />
  <RatingGroup.HiddenInput />
  <RatingGroup.Control>
    <RatingGroup.Item>
      <RatingGroup.ItemIndicator />
    </RatingGroup.Item>
  </RatingGroup.Control>
</RatingGroup.Root>

If you don't need to customize the rating icons, render RatingGroup.Control without children. It renders the number of rating items specified in the count prop.

<RatingGroup.Root count={5} defaultValue={3}>
  <RatingGroup.HiddenInput />
  <RatingGroup.Control />
</RatingGroup.Root>

Examples

Basic

Use the count prop to set the number of rating items, and defaultValue to set the initial rating.

import { RatingGroup } from '@chakra-ui/react'

export const RatingBasic = () => {
  return (
    <RatingGroup.Root count={5} defaultValue={3} size="sm">
      <RatingGroup.HiddenInput />
      <RatingGroup.Control />
    </RatingGroup.Root>
  )
}

Sizes

Use the size prop to change the size of the rating component.

import { For, RatingGroup, Stack } from '@chakra-ui/react'

export const RatingWithSizes = () => {
  return (
    <Stack gap="4">
      <For each={['xs', 'sm', 'md', 'lg'] as const}>
        {(size) => (
          <RatingGroup.Root key={size} count={5} defaultValue={3} size={size}>
            <RatingGroup.HiddenInput />
            <RatingGroup.Control />
          </RatingGroup.Root>
        )}
      </For>
    </Stack>
  )
}

Controlled

Use the value and onValueChange prop to control the rating value.

'use client'

import { useState } from 'react'

import { RatingGroup } from '@chakra-ui/react'

export const RatingControlled = () => {
  const [value, setValue] = useState(3)

  return (
    <RatingGroup.Root
      count={5}
      value={value}
      onValueChange={(e) => setValue(e.value)}
    >
      <RatingGroup.HiddenInput />
      <RatingGroup.Control />
    </RatingGroup.Root>
  )
}

Read Only

Use the readOnly prop to make the rating component read-only. This is useful when displaying an existing rating.

import { RatingGroup } from '@chakra-ui/react'

export const RatingWithReadonly = () => {
  return (
    <RatingGroup.Root readOnly count={5} defaultValue={3} size="sm">
      <RatingGroup.HiddenInput />
      <RatingGroup.Control />
    </RatingGroup.Root>
  )
}

Half Star

Use the allowHalf prop to allow half-star ratings.

import { RatingGroup } from '@chakra-ui/react'

export const RatingWithHalf = () => {
  return (
    <RatingGroup.Root allowHalf count={5} defaultValue={3.5} size="sm">
      <RatingGroup.HiddenInput />
      <RatingGroup.Control />
    </RatingGroup.Root>
  )
}

Custom Icon

Use the icon prop on RatingGroup.ItemIndicator to pass a custom icon to the rating component. This will override the default star icon.

import { RatingGroup } from '@chakra-ui/react'
import { IoHeart } from 'react-icons/io5'

export const RatingWithCustomIcon = () => {
  return (
    <RatingGroup.Root count={5} defaultValue={4} colorPalette="red">
      <RatingGroup.HiddenInput />
      <RatingGroup.Control>
        {Array.from({ length: 5 }).map((_, index) => (
          <RatingGroup.Item key={index} index={index + 1}>
            <RatingGroup.ItemIndicator icon={<IoHeart />} />
          </RatingGroup.Item>
        ))}
      </RatingGroup.Control>
    </RatingGroup.Root>
  )
}

Testimonial

Use the rating component to show testimonials.

Saas UI saved us months of work. The components are well thought out and a joy to build with.

Matthew Jones

CTO, Company

import { Avatar, HStack, RatingGroup, Stack, Text } from '@chakra-ui/react'

export const RatingInTestimonial = () => {
  return (
    <Stack maxW="320px" gap="4">
      <RatingGroup.Root
        colorPalette="orange"
        readOnly
        count={5}
        defaultValue={5}
        size="xs"
      >
        <RatingGroup.HiddenInput />
        <RatingGroup.Control />
      </RatingGroup.Root>

      <Text>
        Saas UI saved us months of work. The components are well thought out and
        a joy to build with.
      </Text>

      <HStack gap="4">
        <Avatar.Root>
          <Avatar.Fallback name="Matthew Jones" />
          <Avatar.Image src="https://randomuser.me/api/portraits/men/70.jpg" />
        </Avatar.Root>
        <Stack textStyle="sm" gap="0">
          <Text fontWeight="medium">Matthew Jones</Text>
          <Text color="fg.muted">CTO, Company</Text>
        </Stack>
      </HStack>
    </Stack>
  )
}

Props

Root

Prop	Default	Type
`count`	`'5'`	`number` The total number of ratings.
`colorPalette`	`'gray'`	`'base' \| 'gray' \| 'zinc' \| 'neutral' \| 'stone' \| 'red' \| 'orange' \| 'amber' \| 'yellow' \| 'lime' \| 'green' \| 'emerald' \| 'teal' \| 'cyan' \| 'sky' \| 'blue' \| 'indigo' \| 'violet' \| 'purple' \| 'fuchsia' \| 'pink' \| 'rose' \| 'sidebar' \| 'sidebar.accent' \| 'interaction' \| 'accent' \| 'presence' \| 'status' \| 'slate'` The color palette of the component
`size`	`'md'`	`'xs' \| 'sm' \| 'md' \| 'lg'` The size of the component
`allowHalf`		`boolean` Whether to allow half stars.
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.
`autoFocus`		`boolean` Whether to autofocus the rating.
`defaultValue`		`number` The initial value of the rating when rendered. Use when you don't need to control the value of the rating.
`disabled`		`boolean` Whether the rating is disabled.
`form`		`string` The associate form of the underlying input element.
`id`		`string` The unique identifier of the machine.
`ids`		`Partial<{ root: string label: string hiddenInput: string control: string item: (id: string) => string }>` The ids of the elements in the rating. Useful for composition.
`name`		`string` The name attribute of the rating element (used in forms).
`onHoverChange`		`(details: HoverChangeDetails) => void` Function to be called when the rating value is hovered.
`onValueChange`		`(details: ValueChangeDetails) => void` Function to be called when the rating value changes.
`readOnly`		`boolean` Whether the rating is readonly.
`required`		`boolean` Whether the rating is required.
`translations`		`IntlTranslations` Specifies the localized strings that identifies the accessibility elements and their states
`value`		`number` The controlled value of the rating
`as`		`React.ElementType` The underlying element to render.
`unstyled`		`boolean` Whether to remove the component's style.

Item

Prop	Default	Type
`index` *		`number`
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior. For more details, read our Composition guide.

Radio

Segmented Control