---
id: rating-group
title: Rating Group
description: Allows users to rate items using a set of icons.
---

<ComponentPreview id="RatingGroup" />

## Anatomy

<Anatomy id="rating-group" />

```tsx
<RatingGroup.Root>
  <RatingGroup.Label />
  <RatingGroup.Control>
    <RatingGroup.Item>
      <RatingGroup.ItemContext />
    </RatingGroup.Item>
    <RatingGroup.HiddenInput />
  </RatingGroup.Control>
</RatingGroup.Root>
```

## Examples

<Example id="basic" />

### Controlled

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

<Example id="controlled" />

### Root Provider

An alternative way to control the rating group is to use the `RootProvider` component and the `useRatingGroup` hook.
This way you can access the state and methods from outside the component.

<Example id="root-provider" />

### Field

The `Field` component helps manage form-related state and accessibility attributes of a rating group. It includes
handling ARIA labels, helper text, and error text to ensure proper accessibility.

<Example id="with-field" />

### Half Rating

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

<Example id="half-star" />

### 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.

<Example id="form-usage" />

### Disabled

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

<Example id="disabled" />

## API Reference

### Props

<ComponentTypes id="rating-group" />

### Context

<ContextType id="rating-group" />

## Accessibility

### Keyboard Support

<KeyBindingsTable id="rating-group" />
