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