Rating

Star rating component. Hover preview shows the prospective rating before clicking. Supports read-only (non-interactive) and disabled modes.

Features

Hover preview shows prospective rating before clicking.

Supports read-only and disabled modes.

Can be controlled or uncontrolled.

Custom star styling via starClassName prop.

Example

4.0(128 reviews)

Small

Medium

Large

Anatomy


import { Rating } from '@wire-ui/react'
 
<Rating value={4} readOnly />

Styling

Rating stars expose data-filled (at or below current value) and data-highlighted (hover preview). Style both via starClassName.


<Rating
  starClassName="
    text-gray-300
    data-[filled]:text-black
    data-[highlighted]:text-black
    data-[disabled]:opacity-50
    hover:scale-110
  "
/>

Using data attributes

Each star element sets data-filled and data-highlighted independently. data-disabled is set when the Rating is disabled.


/* Unfilled star */
.star { color: #e5e5e5; }
 
/* Filled or hovered */
.star[data-filled],
.star[data-highlighted] { color: #000; }

Props

Prop	Type	Default	Description
`value`	`number`	—	Controlled rating value
`defaultValue`	`number`	`0`	Initial value for uncontrolled use
`onChange`	`(value: number) => void`	—	Called when rating changes
`max`	`number`	`5`	Total number of stars
`readOnly`	`boolean`	`false`	Non-interactive; renders `role="img"`
`disabled`	`boolean`	`false`	Disables interaction

Star data attributes

Attribute	When present
`data-filled`	This star is at or below the current rating
`data-hover`	Mouse is hovering this star (hover preview)