Skeleton

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

export const Page = () => {
  // You may optionally implement useState
  const [starValue, setStarValue] = useState(2);

  return <Rating value={starValue} onValueChange={setStarValue} />;
};

Count

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

export const Page = () => {
  const [starValue, setStarValue] = useState(2);
  return <Rating count={3} value={starValue} onValueChange={setStarValue}></Rating>;
};

Custom Icon

import { useState } from 'react';

import { Rating } from '@skeletonlabs/skeleton-react';
import { Bone, Skull } from 'lucide-react';

export const Page = () => {
  const [starValue, setStarValue] = useState(2);
  return <Rating value={starValue} onValueChange={setStarValue} iconEmpty={<Bone size={24} />} iconFull={<Skull size={24} />}></Rating>;
};

Allow Half

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

export const Page = () => {
  const [starValue, setStarValue] = useState(2);

  return <Rating value={starValue} onValueChange={setStarValue} allowHalf></Rating>;
};

Disabled

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

export const Page = () => {
  const [starValue, setStarValue] = useState(2);
  return <Rating value={starValue} onValueChange={setStarValue} disabled></Rating>;
};

Read-Only

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

export const Page = () => {
  const [starValue, setStarValue] = useState(2);
  return <Rating value={starValue} onValueChange={setStarValue} readOnly></Rating>;
};

RTL

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

export const Page = () => {
  const [starValue, setStarValue] = useState(2);
  return <Rating value={starValue} onValueChange={setStarValue} dir="rtl"></Rating>;
};

API Reference

Rating

Property	Type	Description
`base`	string	Set root base classes
`gap`	string	Set root gap classes
`classes`	string	Set root arbitrary classes
`controlBase`	string	Set control base classes
`controlGap`	string	Set control gap classes
`controlClasses`	string	Set control arbitrary classes
`labelBase`	string	Set label base classes
`labelClasses`	string	Set label arbitrary classes
`itemBase`	string	Set item base classes
`itemClasses`	string	Set item arbitrary classes
`stateInteractive`	string	Set item interactive state classes
`stateReadOnly`	string	Set item read-only state classes
`stateDisabled`	string	Set item disabled state classes
`iconEmpty`	ReactNode	Set the empty icon node
`iconHalf`	ReactNode	Set the half icon node
`iconFull`	ReactNode	Set the full icon node
`label`	ReactNode	Set the label node
`onValueChange`		Set the onValueChange callback
`ids`		The ids of the elements in the rating. Useful for composition.
`translations`		Specifies the localized strings that identifies the accessibility elements and their states
`count`	number	The total number of ratings. Default: 5
`name`	string	The name attribute of the rating element (used in forms).
`form`	string	The associate form of the underlying input element.
`value`	number	The current rating value.
`readOnly`	boolean	Whether the rating is readonly.
`disabled`	boolean	Whether the rating is disabled.
`required`	boolean	Whether the rating is required.
`allowHalf`	boolean	Whether to allow half stars.
`autoFocus`	boolean	Whether to autofocus the rating.
`onHoverChange`		Function to be called when the rating value is hovered.
`dir`	"ltr" \| "rtl"	The document's text/writing direction. Default: "ltr"
`getRootNode`		A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.