# Rating Group

Rating Group allows users to rate something

```tsx
import { RatingGroup } from '@skeletonlabs/skeleton-react';

export default function Default() {
	return (
		<RatingGroup count={5}>
			<RatingGroup.Control>
				<RatingGroup.Context>
					{(ratingGroup) => ratingGroup.items.map((index) => <RatingGroup.Item key={index} index={index} />)}
				</RatingGroup.Context>
			</RatingGroup.Control>
			<RatingGroup.HiddenInput />
		</RatingGroup>
	);
}

```

## Allow Half

```tsx
import { RatingGroup } from '@skeletonlabs/skeleton-react';

export default function Half() {
	return (
		<RatingGroup count={5} allowHalf>
			<RatingGroup.Control>
				<RatingGroup.Context>
					{(ratingGroup) => ratingGroup.items.map((index) => <RatingGroup.Item key={index} index={index} />)}
				</RatingGroup.Context>
			</RatingGroup.Control>
			<RatingGroup.HiddenInput />
		</RatingGroup>
	);
}

```

## Custom Icons

```tsx
import { RatingGroup } from '@skeletonlabs/skeleton-react';
import { BoneIcon, SkullIcon } from 'lucide-react';

export default function CustomIcons() {
	return (
		<RatingGroup count={3}>
			<RatingGroup.Control>
				<RatingGroup.Context>
					{(ratingGroup) =>
						ratingGroup.items.map((index) => <RatingGroup.Item key={index} index={index} empty={<BoneIcon />} full={<SkullIcon />} />)
					}
				</RatingGroup.Context>
			</RatingGroup.Control>
			<RatingGroup.HiddenInput />
		</RatingGroup>
	);
}

```

## Label

```tsx
import { RatingGroup } from '@skeletonlabs/skeleton-react';

export default function Label() {
	return (
		<RatingGroup count={5}>
			<RatingGroup.Label>Rate us:</RatingGroup.Label>
			<RatingGroup.Control>
				<RatingGroup.Context>
					{(ratingGroup) => ratingGroup.items.map((index) => <RatingGroup.Item key={index} index={index} />)}
				</RatingGroup.Context>
			</RatingGroup.Control>
			<RatingGroup.HiddenInput />
		</RatingGroup>
	);
}

```

## Disabled

```tsx
import { RatingGroup } from '@skeletonlabs/skeleton-react';

export default function Page() {
	return (
		<RatingGroup count={5} disabled>
			<RatingGroup.Control>
				<RatingGroup.Context>
					{(ratingGroup) => ratingGroup.items.map((index) => <RatingGroup.Item key={index} index={index} />)}
				</RatingGroup.Context>
			</RatingGroup.Control>
			<RatingGroup.HiddenInput />
		</RatingGroup>
	);
}

```

## Direction

```tsx
import { RatingGroup } from '@skeletonlabs/skeleton-react';

export default function Dir() {
	return (
		<RatingGroup count={5} dir="rtl">
			<RatingGroup.Label>Label</RatingGroup.Label>
			<RatingGroup.Control>
				<RatingGroup.Context>
					{(ratingGroup) => ratingGroup.items.map((index) => <RatingGroup.Item key={index} index={index} />)}
				</RatingGroup.Context>
			</RatingGroup.Control>
			<RatingGroup.HiddenInput />
		</RatingGroup>
	);
}

```

## API Reference

### RatingGroupRootProps

| Property       | Default | Type                                                                                                                         | Description                                                                                                    |
| -------------- | ------- | ---------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- |
| ids?           | -       | Partial\<\{ root: string; label: string; hiddenInput: string; control: string; item: (id: string) => string; }> \| undefined | The ids of the elements in the rating. Useful for composition.                                                 |
| translations?  | -       | IntlTranslations \| undefined                                                                                                | Specifies the localized strings that identifies the accessibility elements and their states                    |
| count?         | 5       | number \| undefined                                                                                                          | The total number of ratings.                                                                                   |
| name?          | -       | string \| undefined                                                                                                          | The name attribute of the rating element (used in forms).                                                      |
| form?          | -       | string \| undefined                                                                                                          | The associate form of the underlying input element.                                                            |
| value?         | -       | number \| undefined                                                                                                          | The controlled value of the rating                                                                             |
| defaultValue?  | -       | number \| undefined                                                                                                          | The initial value of the rating when rendered.&#xA;Use when you don't need to control the value of the rating. |
| readOnly?      | -       | boolean \| undefined                                                                                                         | Whether the rating is readonly.                                                                                |
| disabled?      | -       | boolean \| undefined                                                                                                         | Whether the rating is disabled.                                                                                |
| required?      | -       | boolean \| undefined                                                                                                         | Whether the rating is required.                                                                                |
| allowHalf?     | -       | boolean \| undefined                                                                                                         | Whether to allow half stars.                                                                                   |
| autoFocus?     | -       | boolean \| undefined                                                                                                         | Whether to autofocus the rating.                                                                               |
| onValueChange? | -       | ((details: ValueChangeDetails) => void) \| undefined                                                                         | Function to be called when the rating value changes.                                                           |
| onHoverChange? | -       | ((details: HoverChangeDetails) => void) \| undefined                                                                         | Function to be called when the rating value is hovered.                                                        |
| dir?           | "ltr"   | "ltr" \| "rtl" \| undefined                                                                                                  | The document's text/writing direction.                                                                         |
| getRootNode?   | -       | (() => ShadowRoot \| Node \| Document) \| undefined                                                                          | A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.                     |
| element?       | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined                                                               | Render the element yourself                                                                                    |

### RatingGroupRootProviderProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| value    | -       | RatingGroupApi\<PropTypes>                                     | -                           |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### RatingGroupRootContextProps

| Property | Default | Type                                                   | Description |
| -------- | ------- | ------------------------------------------------------ | ----------- |
| children | -       | (ratingGroup: RatingGroupApi\<PropTypes>) => ReactNode | -           |

### RatingGroupLabelProps

| Property | Default | Type                                                             | Description                 |
| -------- | ------- | ---------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"label">) => Element) \| undefined | Render the element yourself |

### RatingGroupControlProps

| Property | Default | Type                                                           | Description                 |
| -------- | ------- | -------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined | Render the element yourself |

### RatingGroupItemProps

| Property | Default         | Type                                                            | Description                                                |
| -------- | --------------- | --------------------------------------------------------------- | ---------------------------------------------------------- |
| empty?   | StarEmpty (SVG) | ReactNode                                                       | The content to render when the item is in the empty state. |
| half?    | StarHalf (SVG)  | ReactNode                                                       | The content to render when the item is in the half state.  |
| full?    | StarFull (SVG)  | ReactNode                                                       | The content to render when the item is in the full state.  |
| index    | -               | number                                                          | -                                                          |
| element? | -               | ((attributes: HTMLAttributes\<"span">) => Element) \| undefined | Render the element yourself                                |

### RatingGroupHiddenInputProps

| Property | Default | Type                                                             | Description                 |
| -------- | ------- | ---------------------------------------------------------------- | --------------------------- |
| element? | -       | ((attributes: HTMLAttributes\<"input">) => Element) \| undefined | Render the element yourself |