Rating Group

<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

<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

<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

Rate us:

<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

<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

Label

<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

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

RootProvider

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

RootContext

Property	Default	Type
`children`	-	Snippet<[() => RatingGroupApi<PropTypes>]>

Label

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

Control

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

Item

Property	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

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

Skeleton

catppuccin

cerberus

concord

crimson

fennec

hamlindigo

legacy

mint

modern

mona

nosh

nouveau

pine

reign

rocket

rose

sahara

seafoam

terminus

vintage

vox

wintry

Allow Half

Custom Icons

Label

Disabled

Direction

API Reference

Root

RootProvider

RootContext

Label

Control

Item

HiddenInput