Rating

Star rating. Editable ratings are a single role="slider" (arrows, Home/End); read-only ones are an img with the value as its label. Half values render as a half-filled star.

Import

import { Rating } from "@jcsoftdev/ui/forms";

Single-component entry points tree-shake to just this component: @jcsoftdev/ui/forms/rating.

Usage

<Rating
  defaultValue={4}
  max={5}
  precision={1}
  size="md"
  aria-label="Valoración del corte"
/>

Props

Prop	Type	Default	Description
value	number
defaultValue	number	0
onValueChange	((value: number) => void)
max	number	5
precision	1 | 0.5	1	0.5 allows half stars.
readOnly	boolean
disabled	boolean
size	"sm" | "md" | "lg"	"md"
showValue	boolean		Shows the numeric value after the stars.
aria-label	string
className	string

* marks a required prop.

Storybook stories

• Default
• Half Stars
• Read Only
• Sizes
• Controlled Value
• Narrow
• Brutal Preset

Source

packages/ui/src/forms/rating/rating.tsx