form · Normal DOM only

Rating

Star rating from 0 to max. Optional half-step, read-only mode for displaying aggregated values.

Use Rating for subjective scoring: feedback, reviews, deal-temperature, lead-priority. For exact numeric values use NumberInput or Slider.

Install

Pull from the workspace packages (already available if you ran pnpm add):

ts
import { Rating } from '@8maverik8/twenty-design';

Examples

Interactive, read-only, and half-step

value: 3.5
half stars
read-only
tsx
<Rating value={r} onChange={setR} />
<Rating value={4.5} allowHalf onChange={…} />
<Rating value={5} readOnly size={20} />

Guidelines

✓
Use allowHalf for richer self-rating UIs.Whole-only forces users to round; half-steps reflect intent better.
✓
Use readOnly for aggregated displays (average review score).Hover effects on a non-interactive value confuse users.
✕
Use Rating for binary categorical values.Use Switch or Checkbox.