Rating

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={(e) => setStarValue(e.value)} />;
};

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={(e) => setStarValue(e.value)}></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={(e) => setStarValue(e.value)}
      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={(e) => setStarValue(e.value)} 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={(e) => setStarValue(e.value)} 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={(e) => setStarValue(e.value)} 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={(e) => setStarValue(e.value)} dir="rtl"></Rating>;
};

Anatomy

<Ratings>

<div>

label

<div>

control

<div>

item

<span>

(unlabled)

<svg>

API Reference

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
`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
`ids`		The ids of the elements in the rating. Useful for composition.
`value`	number	The controlled value of the rating
`defaultValue`	number	The initial value of the rating when rendered. Use when you don't need to control the value of the rating.
`disabled`	boolean	Whether the rating is disabled.
`onValueChange`		Function to be called when the rating value changes.
`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.
`name`	string	The name attribute of the rating element (used in forms).
`form`	string	The associate form of the underlying input element.
`readOnly`	boolean	Whether the rating is readonly.
`required`	boolean	Whether the rating is required.
`autoFocus`	boolean	Whether to autofocus the rating.
`translations`		Specifies the localized strings that identifies the accessibility elements and their states
`count`	number	The total number of ratings. Default: 5
`allowHalf`	boolean	Whether to allow half stars.
`onHoverChange`		Function to be called when the rating value is hovered.