RatingGroup

A set of buttons that allow users to rate something.

Usage

The RatingGroup component allows users to provide a rating by selecting a number of icons, typically stars.

import { Icon, RatingGroup } from "@elemnts-ui/react";

<RatingGroup.Root count={5} defaultValue={3}>
  <RatingGroup.Label>Rating</RatingGroup.Label>
  <RatingGroup.Control>
    <RatingGroup.Context>
      {({ items }) =>
        items.map((item) => (
          <RatingGroup.Item key={item} index={item}>
            <RatingGroup.Indicator>
              <Icon icon="tabler:star" />
              <Icon icon="tabler:star-filled" />
            </RatingGroup.Indicator>
          </RatingGroup.Item>
        ))
      }
    </RatingGroup.Context>
  </RatingGroup.Control>
  <RatingGroup.HiddenInput />
</RatingGroup.Root>;

Half Rating

Use the allowHalf prop to allow users to select half-star ratings.

Disabled

Use the disabled prop to disable the rating group.

Read Only

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

Color Palette

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

API Reference

RatingGroupRoot

The root component for the rating group.

Prop	Type	Default
allowHalf	`boolean`	`false`
asChild	`boolean`	`false`
autoFocus	`boolean`	`false`
count	`number`	`5`
defaultValue	`number`	-
disabled	`boolean`	`false`
form	`string`	-
id	`string`	-
ids	`Partial<{ root: string; label: string; hiddenInput: string; control: string; item: (id: string) => string }>`	-
name	`string`	-
onHoverChange	`(details: HoverChangeDetails) => void`	-
onValueChange	`(details: ValueChangeDetails) => void`	-
readOnly	`boolean`	`false`
required	`boolean`	`false`
translations	`IntlTranslations`	-
value	`number`	-

RatingGroupRootProvider

Provides a rating group API returned by useRatingGroup to its descendants.

Prop	Type	Default
value	`UseRatingGroupReturn`	required
asChild	`boolean`	`false`

RatingGroupLabel

The label for the rating group.

Prop	Type	Default
asChild	`boolean`	`false`

RatingGroupControl

Wraps the rating items.

Prop	Type	Default
asChild	`boolean`	`false`

RatingGroupItem

Represents an individual rating item.

Prop	Type	Default
index	`number`	required
asChild	`boolean`	`false`

RatingGroupIndicator

Displays the visual state of a rating item.

Prop	Type	Default
asChild	`boolean`	`false`

RatingGroupHiddenInput

The hidden input used for form submission.

Prop	Type	Default
asChild	`boolean`	`false`