Rating

Rating

<Rating defaultValue={3} onChange={setRating} />

{/* Half-star precision */}
<Rating step={0.5} defaultValue={3.5} size="lg" />

{/* Display only */}
<Rating value={4.5} step={0.5} readOnly size="sm" />

Install: @helixui/core

import { Rating } from '@helixui/core'

status: stable · since: 0.5.0

Tags: stars, rating, review

Anatomy

★ ★ ★ ★ ☆   4 of 5

Layout

• display — inline-flex
• width — content
• height — content
• intrinsicSize — hugs N stars
• stackable — true
• fullBleed — false

Visual

A row of star glyphs filled to the current value. Half-star precision when enabled. Read-only mode disables interaction and lowers contrast.

Props

Name	Type	Default	Description
value	number	—	Controlled value 0..max.
defaultValue	number	0	Uncontrolled initial.
max	number	5	Total stars.
step	0.5 | 1	1	Increments. 0.5 enables half-star precision.
onChange	(v) => void	—	Change handler.
readOnly	boolean	false	Display mode — no hover, no click.
size	'sm' | 'md' | 'lg'	md	Star size.
label	string	Rating	aria-label.
allowClear	boolean	false	Clicking the current value clears back to 0.

Tokens used

color.bg.action.warning.default, color.border.focus

Accessibility

Role: slider

Notes

• When interactive: role="slider", aria-valuenow/min/max reflect the value. When readOnly: role="img".
• Each tap target is a <button> so it’s keyboard-accessible.

Composes with

Component	Relation	Note
Form	parent	Inside a form when collecting reviews.
Slider	sibling

Prompt examples

These are the AI prompt → JSX mappings used by the helixui prompt DSL and integrations like Cursor / Claude Code.

leave a review

“5-star rating with half precision”

<Rating value={value} onChange={setValue} allowHalf />

show product score

“read-only rating of 4.5”

<Rating value={4.5} readOnly />

Related

• Slider