Rating

Implemented

Star rating display + input. Read-only (display) or interactive (input). 5 stars by default, half-stars supported.

Categorymolecules

Sourcepatterns/molecules/rating.html

AI HintStar rating display + input. readOnly mode is the near-term consumer path (comparison tables, social proof). Half-stars are pointer-selectable only — keyboard steps whole stars; aria-checked cannot express 3.5. Value announcements are hardcoded English ('{n} out of {max} stars').

Star rating display + input. Interactive mode renders a labeled radiogroup (value + label are required); readOnly mode renders a display-only role="img". 5 stars by default.

Rating

Rating molecule (Tier 2)

Star rating display + input. The readOnly path is the one every current adoption target needs (see SocialProof / EventComparisonTable cross-references in the docs page).

Interactive — minimum valid usage (value + label required)

readOnly — display path

readOnly + precision="half" — half-star fill (visual only)

Props

Preview

Rating

Prop

Type

Required

Default

Description

value

number

Required

—

0 to max

label

string

Required

—

No description.

max

number

Optional

5

Maximum allowed value.

readOnly

boolean

Optional

false

Makes the value read-only.

onChange

(value: number) => void

Optional

—

Called when the value changes.

size

RatingSize

Optional

'md'

Wrapper size preset. Known defect: the star glyph is hardcoded 24px at every size — visual scaling is a tracked fix.

precision

RatingPrecision

Optional

'whole'

'half' enables half-star fill and pointer half-selection. Keyboard arrows currently step whole stars regardless.

Quick use:<Rating />

Accessibility

ARIA roleradiogroup (input) | img (read-only)

Usage

Import

tsxSnippet

import { Rating } from "@epasslive/design-system"

Example 1

tsxSnippet

<Rating value={4} label="Product rating" onChange={setRating} />

Example 2

tsxSnippet

<Rating value={3.5} label="Editor rating" precision="half" readOnly />

Anti-patterns

— Do not hardcode data in molecules

— Avoid complex business logic in molecules