Rating Group | Zalify UI

React

Usage

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

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

Shortcuts

The RatingGroup 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

Sizes

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

React

Controlled

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

React

ReadOnly

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

React

Custom Icon

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

React

Label

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

Rating

React

Half Star

Use the allowHalf prop to allow half-star ratings.

React

Colors

Use the colorPalette prop to change the color of the rating.

React

Closed Component

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

import { forwardRef, type ReactElement, type ReactNode } from 'react'
import { RatingGroup as StyledRatingGroup } from '@zalify-ui/react'

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

export const RatingGroup = forwardRef<HTMLDivElement, RatingProps>(function Rating(props, ref) {
  const { icon, count = 5, label, ...rest } = props
  return (
    <StyledRatingGroup.Root ref={ref} count={count} {...rest}>
      {label && <StyledRatingGroup.Label>{label}</StyledRatingGroup.Label>}
      <StyledRatingGroup.HiddenInput />
      <StyledRatingGroup.Control>
        <StyledRatingGroup.Items icon={icon} />
      </StyledRatingGroup.Control>
    </StyledRatingGroup.Root>
  )
})

So that you can use it like this:

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

Props

Root

Prop	Default	Type
`size`	`'md'`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`
`count`	`5`	`number` The total number of ratings.
`allowHalf`		`boolean` Whether to allow half stars.
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior.
`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

Item

Prop	Default	Type
`index`*		`number`
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior.