build69
build69  /  Components  /  Selection & Choice  /  Rating

Rating

v1.0.3Updated 20 Jul 2026

Five-star rating with half-star precision, hover preview, hover labels, custom icon support, read-only / disabled states, and three sizes.

Preview

Live · 10 stories
DefaultOpen ↗
Why this is recommendedformratingstarsreview+2

The default, out-of-the-box Rating.

Recommended for+14
  • Review / feedback forms
  • Product ratings
  • Like / favourite controls
Tags+6
formratingstarsreviewhalf-stardefault
Features+4
  • 1-5 stars (configurable max)
  • Precision: 0.5 (half-star) or 1
  • Hover preview
  • Hover label slot
  • Custom icon (heart, thumbs-up, …)
  • Read-only + disabled states
  • Sizes sm / md / lg
Not recommended for−2
  • Numeric input with > 10 values (use Slider)
  • Yes / no (use Switch)

Install

Ask your agent, or call the MCP tool directly. The resolved bundle is written into your project.

get_registry_item({ name: "Rating" })

Usage

import { Rating } from '@/components/inputs/rating';

<Rating value={rating} onValueChange={setRating} precision={0.5} hoverLabels={["Hated it", "Disliked", "OK", "Liked", "Loved it"]} />

Tick variants in the left menu — each adds a tab with that variant’s real story source, the same code the preview above renders.

Props

PropTypeRequired
value

Current rating

number
onValueChange

Value change callback

function
max

Maximum stars

number
precision

Step precision

0.5 | 1
icon

Custom icon

ReactNode
readOnly

Read-only display

boolean
hoverLabels

Per-step hover labels

string[]

Related