# Rating Group
Rating Group allows users to rate something
```svelte
{#snippet children(ratingGroup)}
{#each ratingGroup().items as index (index)}
{/each}
{/snippet}
```
## Allow Half
```svelte
{#snippet children(ratingGroup)}
{#each ratingGroup().items as index (index)}
{/each}
{/snippet}
```
## Custom Icons
```svelte
{#snippet children(ratingGroup)}
{#each ratingGroup().items as index (index)}
{#snippet empty()}
{/snippet}
{#snippet full()}
{/snippet}
{/each}
{/snippet}
```
## Label
```svelte
Rate us:
{#snippet children(ratingGroup)}
{#each ratingGroup().items as index (index)}
{/each}
{/snippet}
```
## Disabled
```svelte
{#snippet children(ratingGroup)}
{#each ratingGroup().items as index (index)}
{/each}
{/snippet}
```
## Direction
```svelte
Label
{#snippet children(ratingGroup)}
{#each ratingGroup().items as index (index)}
{/each}
{/snippet}
```
## 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 | - | Snippet\<\[HTMLAttributes\<"div">]> \| undefined — Render the element yourself |
| value | - | () => RatingGroupApi\ |
| element | - | Snippet\<\[HTMLAttributes\<"div">]> \| undefined — Render the element yourself |
| children | - | Snippet\<\[() => RatingGroupApi\]> |
| element | - | Snippet\<\[HTMLAttributes\<"label">]> \| undefined — Render the element yourself |
| element | - | Snippet\<\[HTMLAttributes\<"div">]> \| undefined — Render the element yourself |
| empty | StarEmpty (SVG) | Snippet\<\[]> \| undefined — The content to render when the item is in the empty state. |
| half | StarHalf (SVG) | Snippet\<\[]> \| undefined — The content to render when the item is in the half state. |
| full | StarFull (SVG) | Snippet\<\[]> \| undefined — The content to render when the item is in the full state. |
| index | - | number |
| element | - | Snippet\<\[HTMLAttributes\<"span">]> \| undefined — Render the element yourself |
| element | - | Snippet\<\[HTMLAttributes\<"input">]> \| undefined — Render the element yourself |