# Rating Group
Rating Group allows users to rate something
```tsx
import { RatingGroup } from '@skeletonlabs/skeleton-react';
export default function Default() {
return (
{(ratingGroup) => ratingGroup.items.map((index) => )}
);
}
```
## Allow Half
```tsx
import { RatingGroup } from '@skeletonlabs/skeleton-react';
export default function Half() {
return (
{(ratingGroup) => ratingGroup.items.map((index) => )}
);
}
```
## Custom Icons
```tsx
import { RatingGroup } from '@skeletonlabs/skeleton-react';
import { BoneIcon, SkullIcon } from 'lucide-react';
export default function CustomIcons() {
return (
{(ratingGroup) =>
ratingGroup.items.map((index) => } full={} />)
}
);
}
```
## Label
```tsx
import { RatingGroup } from '@skeletonlabs/skeleton-react';
export default function Label() {
return (
Rate us:
{(ratingGroup) => ratingGroup.items.map((index) => )}
);
}
```
## Disabled
```tsx
import { RatingGroup } from '@skeletonlabs/skeleton-react';
export default function Page() {
return (
{(ratingGroup) => ratingGroup.items.map((index) => )}
);
}
```
## Direction
```tsx
import { RatingGroup } from '@skeletonlabs/skeleton-react';
export default function Dir() {
return (
Label
{(ratingGroup) => ratingGroup.items.map((index) => )}
);
}
```
## API Reference
| Property | Default | Type |
| ------------- | --------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 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.
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 |
| value | - | RatingGroupApi\ |
| element | - | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined — Render the element yourself |
| children | - | (ratingGroup: RatingGroupApi\) => ReactNode |
| element | - | ((attributes: HTMLAttributes\<"label">) => Element) \| undefined — Render the element yourself |
| element | - | ((attributes: HTMLAttributes\<"div">) => Element) \| undefined — Render the element yourself |
| 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 |
| element | - | ((attributes: HTMLAttributes\<"input">) => Element) \| undefined — Render the element yourself |