Rating Group - Skeleton

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

export default function Default() {
  return (
    <RatingGroup count={5}>
      <RatingGroup.Control>
        <RatingGroup.Context>
          {(ratingGroup) => ratingGroup.items.map((index) => <RatingGroup.Item key={index} index={index} />)}
        </RatingGroup.Context>
      </RatingGroup.Control>
      <RatingGroup.HiddenInput />
    </RatingGroup>
  );
}

Allow Half

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

Custom Icons

import { RatingGroup } from '@skeletonlabs/skeleton-react';
import { Bone, Skull } 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={<Bone />} full={<Skull />} />)
          }
        </RatingGroup.Context>
      </RatingGroup.Control>
      <RatingGroup.HiddenInput />
    </RatingGroup>
  );
}

Label

Rate us:

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

Disabled

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

Direction

Label

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

export default function Dir() {
  return (
    <RatingGroup count={5}>
      <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>
  );
}

API Reference

RatingGroupControl

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

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

RatingGroupHiddenInput

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

RatingGroupItem

Property	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

RatingGroupLabel

label-text

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

RatingGroupRootProvider

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

RatingGroupRoot

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`	-	((attributes: HTMLAttributes<"div">) => Element) \| undefined Render the element yourself

RatingGroupRootContext

Property	Default	Type
`children`	-	(ratingGroup: RatingGroupApi<PropTypes>) => ReactNode