# Rating Group
Rating Group allows users to rate something

```tsx

	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

	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

	return (
		<RatingGroup count={3}>
			<RatingGroup.Control>
				<RatingGroup.Context>
					{(ratingGroup) =>
						ratingGroup.items.map((index) => <RatingGroup.Item key={index} index={index} empty={<Bone />} full={<Skull />} />)
					}
				</RatingGroup.Context>
			</RatingGroup.Control>
			<RatingGroup.HiddenInput />
		</RatingGroup>
	);
}

```

## Label

```tsx

	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

	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

	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

### RatingGroupRoot

| Property | 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` | number | undefined | The total number of ratings. Default: 5 |
| `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. 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" | "rtl" | undefined | The document's text/writing direction. Default: "ltr" |
| `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 |

### RatingGroupRootProvider

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

### RatingGroupRootContext

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

### RatingGroupLabel

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

### RatingGroupControl

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

### RatingGroupItem

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

### RatingGroupHiddenInput

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