Rating Group - Skeleton

<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 Bone from '@lucide/svelte/icons/bone';
  import Skull from '@lucide/svelte/icons/skull';
  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()}
              <Bone />
            {/snippet}
            {#snippet full()}
              <Skull />
            {/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

flex flex-col gap-2

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

label-text

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

Control

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

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