Ark UI

Import

import {
  Rating,
  RatingGroup,
  RatingGroupControl,
  RatingGroupLabel,
} from '@ark-ui/react'

Usage

The RatingGroup component consists of the RatingGroup, RatingGroupControl and RatingGroupLabel components.

<RatingGroup max={5} defaultValue={3}>
  <RatingGroupLabel>Label</RatingGroupLabel>
  <RatingGroupControl>
    {({ sizeArray }) =>
      sizeArray.map((index) => (
        <Rating key={index} index={index}>
          {({ isHighlighted }) => {
            if (isHighlighted) return <IconFull />
            return <IconEmpty />
          }}
        </Rating>
      ))
    }
  </RatingGroupControl>
</RatingGroup>

Using half ratings

Allow 0.5 value steps by setting the allowHalf prop to true. Ensure to render the correct icon if the isHalf value is set in the Rating components render callback.

<RatingGroup max={5} defaultValue={3} allowHalf>
  <RatingGroupLabel>Label</RatingGroupLabel>
  <RatingGroupControl>
    {({ sizeArray }) =>
      sizeArray.map((index) => (
        <Rating key={index} index={index}>
          {({ isHalf, isHighlighted }) => {
            if (isHalf) return <IconHalf />
            if (isHighlighted) return <IconFull />
            return <IconEmpty />
          }}
        </Rating>
      ))
    }
  </RatingGroupControl>
</RatingGroup>

Using a default value

<RatingGroup max={5} defaultValue={3}>
  {/*..*/}
  </RatingGroupControl>

Controlled

When using the RatingGroup component, you can use the value and onChange props to control the state.

const ControlledRatingGroup = () => {
  const [value, setValue] = React.useState(0)

  return (
    <RatingGroup
      max={5}
      value={value}
      onChange={(details) => setValue(details.value)}
      allowHalf
    >
      <RatingGroupLabel>Label</RatingGroupLabel>
      <RatingGroupControl>
        {({ sizeArray }) =>
          sizeArray.map((index) => (
            <Rating key={index} index={index}>
              {({ isHalf, isHighlighted }) => {
                if (isHalf) return <IconHalf />
                if (isHighlighted) return <IconFull />
                return <IconEmpty />
              }}
            </Rating>
          ))
        }
      </RatingGroupControl>
    </RatingGroup>
  )
}

Disabling the rating group

To make the rating group disabled, set the disabled prop to true.

<RatingGroup disabled>{/*...*/}</RatingGroup>

Readonly rating group

To make the rating group readonly, set the readonly prop to true.

<RatingGroup readonly>{/*...*/}</RatingGroup>

Usage within forms

To use the rating group within forms, pass the prop name. It will render a hidden input and ensure the value changes get propagated to the form correctly.

<RatingGroup name="my-rating">{/*...*/}</RatingGroup>

Rating Group