Rating

Usage

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

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

Shortcuts

The Rating component also provides a set of shortcuts for common use cases.

RatingControl

This component renders the number of rating items specified in the count prop.

This works:

<RatingGroup.Control>
  {Array.from({ length: 5 }).map((_, index) => (
    <RatingGroup.Item key={index} index={index + 1}>
      <RatingGroup.ItemIndicator />
    </RatingGroup.Item>
  ))}
</RatingGroup.Control>

This might be more concise, if you don't need to customize the rating icons:

<RatingGroup.Control />

Examples

Basic

Sizes

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

Controlled

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

Store

An alternative way to control the rating is to use the RootProvider component and the useRatingGroup store hook.

This way you can access the rating state and methods from outside the component.

ReadOnly

Use the readOnly prop to make the rating component read-only.

Hook Form

Here's an example of how to use rating with react-hook-form.

Custom Icon

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

Label

Render the RatingGroup.Label component to provide a human-readable label for the rating component.

Half Star

Use the allowHalf prop to allow half-star ratings.

Emoji

Compose the rating component with emojis.

Colors

Use the colorPalette prop to change the color of the rating

Testimonial

Use the rating component to show testimonials.

PreviewCode

Stackblitz

Sage is a great software engineer. He is very professional and knowledgeable.

MJ

Matthew Jones

CTO, Company

Closed Component

Here's how to setup the Rating for a closed component composition.

import { RatingGroup } from "@chakra-ui/react"
import * as React from "react"

export interface RatingProps extends RatingGroup.RootProps {
  icon?: React.ReactElement
  count?: number
  label?: React.ReactNode
}

export const Rating = React.forwardRef<HTMLDivElement, RatingProps>(
  function Rating(props, ref) {
    const { icon, count = 5, label, ...rest } = props
    return (
      <RatingGroup.Root ref={ref} count={count} {...rest}>
        {label && <RatingGroup.Label>{label}</RatingGroup.Label>}
        <RatingGroup.HiddenInput />
        <RatingGroup.Control>
          {Array.from({ length: count }).map((_, index) => (
            <RatingGroup.Item key={index} index={index + 1}>
              <RatingGroup.ItemIndicator icon={icon} />
            </RatingGroup.Item>
          ))}
        </RatingGroup.Control>
      </RatingGroup.Root>
    )
  },
)

Here's how to use the it

<Rating defaultValue={3} size="sm" />

Props

Root

Item