# Rating Group

Rating Group allows users to rate something

```svelte
<script lang="ts">
	import { RatingGroup } from '@skeletonlabs/skeleton-svelte';
</script>

<RatingGroup count={5}>
	<RatingGroup.Control>
		<RatingGroup.Context>
			{#snippet children(ratingGroup)}
				{#each ratingGroup().items as index (index)}
					<RatingGroup.Item {index} />
				{/each}
			{/snippet}
		</RatingGroup.Context>
	</RatingGroup.Control>
	<RatingGroup.HiddenInput />
</RatingGroup>

```

## Allow Half

```svelte
<script lang="ts">
	import { RatingGroup } from '@skeletonlabs/skeleton-svelte';
</script>

<RatingGroup count={5} allowHalf={true}>
	<RatingGroup.Control>
		<RatingGroup.Context>
			{#snippet children(ratingGroup)}
				{#each ratingGroup().items as index (index)}
					<RatingGroup.Item {index} />
				{/each}
			{/snippet}
		</RatingGroup.Context>
	</RatingGroup.Control>
	<RatingGroup.HiddenInput />
</RatingGroup>

```

## Custom Icons

```svelte
<script lang="ts">
	import { BoneIcon, SkullIcon } from '@lucide/svelte';
	import { RatingGroup } from '@skeletonlabs/skeleton-svelte';
</script>

<RatingGroup count={3}>
	<RatingGroup.Control>
		<RatingGroup.Context>
			{#snippet children(ratingGroup)}
				{#each ratingGroup().items as index (index)}
					<RatingGroup.Item {index}>
						{#snippet empty()}
							<BoneIcon />
						{/snippet}
						{#snippet full()}
							<SkullIcon />
						{/snippet}
					</RatingGroup.Item>
				{/each}
			{/snippet}
		</RatingGroup.Context>
	</RatingGroup.Control>
	<RatingGroup.HiddenInput />
</RatingGroup>

```

## Label

```svelte
<script lang="ts">
	import { RatingGroup } from '@skeletonlabs/skeleton-svelte';
</script>

<RatingGroup count={5}>
	<RatingGroup.Label>Rate us:</RatingGroup.Label>
	<RatingGroup.Control>
		<RatingGroup.Context>
			{#snippet children(ratingGroup)}
				{#each ratingGroup().items as index (index)}
					<RatingGroup.Item {index} />
				{/each}
			{/snippet}
		</RatingGroup.Context>
	</RatingGroup.Control>
	<RatingGroup.HiddenInput />
</RatingGroup>

```

## Disabled

```svelte
<script lang="ts">
	import { RatingGroup } from '@skeletonlabs/skeleton-svelte';
</script>

<RatingGroup count={5} disabled={true}>
	<RatingGroup.Control>
		<RatingGroup.Context>
			{#snippet children(ratingGroup)}
				{#each ratingGroup().items as index (index)}
					<RatingGroup.Item {index} />
				{/each}
			{/snippet}
		</RatingGroup.Context>
	</RatingGroup.Control>
	<RatingGroup.HiddenInput />
</RatingGroup>

```

## Direction

```svelte
<script lang="ts">
	import { RatingGroup } from '@skeletonlabs/skeleton-svelte';
</script>

<RatingGroup count={5} dir="rtl">
	<RatingGroup.Label>Label</RatingGroup.Label>
	<RatingGroup.Control>
		<RatingGroup.Context>
			{#snippet children(ratingGroup)}
				{#each ratingGroup().items as index (index)}
					<RatingGroup.Item {index} />
				{/each}
			{/snippet}
		</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?       | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined                                                                             | Render the element yourself                                                                                    |

### RatingGroupRootProviderProps

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

### RatingGroupRootContextProps

| Property | Default | Type                                          | Description |
| -------- | ------- | --------------------------------------------- | ----------- |
| children | -       | Snippet\<\[() => RatingGroupApi\<PropTypes>]> | -           |

### RatingGroupLabelProps

| Property | Default | Type                                               | Description                 |
| -------- | ------- | -------------------------------------------------- | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"label">]> \| undefined | Render the element yourself |

### RatingGroupControlProps

| Property | Default | Type                                             | Description                 |
| -------- | ------- | ------------------------------------------------ | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"div">]> \| undefined | Render the element yourself |

### RatingGroupItemProps

| Property | Default         | Type                                              | Description                                                |
| -------- | --------------- | ------------------------------------------------- | ---------------------------------------------------------- |
| 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                                |

### RatingGroupHiddenInputProps

| Property | Default | Type                                               | Description                 |
| -------- | ------- | -------------------------------------------------- | --------------------------- |
| element? | -       | Snippet\<\[HTMLAttributes\<"input">]> \| undefined | Render the element yourself |