Rating

molecules

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

ARIA Role: radiogroup (input) | img (read-only)

Demo

Demo for Rating (molecules)

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

Props

Prop	Type	Required	Default	Description
`value`	`number`	Yes	`—`	0 to max
`label`	`string`	Yes	`—`

TypeScript Interface

interface RatingProps {
  value: number;
  max?: number;
  readOnly?: boolean;
  onChange?: (value: number) => void;
  size?: 'sm' | 'md' | 'lg';
  label: string;
}

Assertions (NASA Rule 5)

[type]value in [0, max] (NASA Rule 7)(NASA Rule 7)

Usage

Import

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

Basic

<Rating />

With Variants

<Rating variant="primary" size="md" />