Rating Group · Skeleton

tsx

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

export default function Default() {
	const [value, setValue] = useState(3);
	return (
		<RatingGroup value={value} onValueChange={(e) => setValue(e.value)} count={5}>
			<RatingGroup.Control>
				<RatingGroup.Context>
					{(ratingGroup) => ratingGroup.items.map((index) => <RatingGroup.Item key={index} index={index} />)}
				</RatingGroup.Context>
			</RatingGroup.Control>
			<RatingGroup.HiddenInput />
		</RatingGroup>
	);
}

svelte

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

	const value = $state(3);
</script>

<RatingGroup count={5} {value}>
	<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>

Half Step

Set the allowHalf prop to enable half steps.

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>
	);
}

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

Insert your own custom images or icons for the empty and full states.

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>
	);
}

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

Use the Label component to describe the intended usage.

Rate us:

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>
	);
}

Rate us:

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

Set the disabled prop to enable the disabled state.

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>
	);
}

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

Set the text direction (ltr or rtl) using the dir prop.

Label

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>
	);
}

Label

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

Root

txt

flex flex-col gap-2

Prop	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

Provider

Prop	Default	Type
`value`	—	RatingGroupApi<PropTypes>
`element`	—	((attributes: HTMLAttributes<"div">) => Element) \| undefined Render the element yourself

Context

Prop	Default	Type
`children`	—	(ratingGroup: RatingGroupApi<PropTypes>) => ReactNode

Label

txt

label-text

Prop	Default	Type
`element`	—	((attributes: HTMLAttributes<"label">) => Element) \| undefined Render the element yourself

Control

txt

flex gap-2 data-disabled:cursor-not-allowed data-disabled:opacity-50

Prop	Default	Type
`element`	—	((attributes: HTMLAttributes<"div">) => Element) \| undefined Render the element yourself

Item

Prop	Default	Type
`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

HiddenInput

Prop	Default	Type
`element`	—	((attributes: HTMLAttributes<"input">) => Element) \| undefined Render the element yourself

Root

txt

flex flex-col gap-2

Prop	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

Provider

Prop	Default	Type
`value`	—	() => RatingGroupApi<PropTypes>
`element`	—	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

Context

Prop	Default	Type
`children`	—	Snippet<[() => RatingGroupApi<PropTypes>]>

Label

txt

label-text

Prop	Default	Type
`element`	—	Snippet<[HTMLAttributes<"label">]> \| undefined Render the element yourself

Control

txt

flex gap-2 data-disabled:cursor-not-allowed data-disabled:opacity-50

Prop	Default	Type
`element`	—	Snippet<[HTMLAttributes<"div">]> \| undefined Render the element yourself

Item

Prop	Default	Type
`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

HiddenInput

Prop	Default	Type
`element`	—	Snippet<[HTMLAttributes<"input">]> \| undefined Render the element yourself