Rating

A rating input allows users to rate something using stars, hearts, or custom shapes.

Installation

npx jsx-daisyui add rating

Sizes

Colors

rating-colors

Props

Rating

Prop	Type	Default	Description
`name`	`string`	-	Unique name used for the underlying radio inputs.
`value`	`number`	-	Controlled value (1-based index).
`defaultValue`	`number`	-	Default value for uncontrolled usage.
`onValueChange`	`(value: number) => void`	-	Called when the user picks a new rating.
`disabled`	`boolean`	-	Disables all items.
`readOnly`	`boolean`	-	Renders divs instead of inputs (purely visual).
`half`	`boolean`	-	Enables half-star mode.
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	The size of the rating items.

Rating.Item

Prop	Type	Default	Description
`itemIndex`	`number`	-	1-based index of this rating item.
`mask`	`'mask-star' \| 'mask-star-2' \| 'mask-heart' \| 'mask-square' \| 'mask-circle'`	`'mask-star-2'`	Mask shape class for the rating item shape.
`color`	`string`	`'bg-orange-400'`	Tailwind bg-* color class for the item.
`halfSide`	`'first' \| 'second'`	-	For half-star mode: which half this item represents.