Face Rating

A five-level rating input where an SVG face morphs between moods.

@spectrumui/face-rating

How was your experience?

Hover a segment to preview, click to commit

Installation

Usage

import { FaceRating } from "@/components/spectrumui/face-rating"

<FaceRating onValueChange={(value) => console.log(value)} />

API Reference

FaceRating

Renders a decorative morphing face above a radiogroup of five segment buttons, movable with ArrowLeft and ArrowRight. Pass value to control it from outside, or defaultValue to let it manage its own state.

Prop	Type	Default	Description
`value`	`number`	-	Controlled rating from 1-5; 0 means unset. Leave undefined for uncontrolled usage
`defaultValue`	`number`	`0`	Initial rating when uncontrolled; 0 means unset
`onValueChange`	`(value: number) => void`	-	Fires with the next rating on every commit
`labels`	`[string, string, string, string, string]`	`["Terrible", "Bad", "Okay", "Good", "Amazing"]`	Mood names for levels 1-5, shown under the widget and read to screen readers
`showLabel`	`boolean`	`true`	Show the mood label under the segments
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Visual size of the widget (56 / 72 / 96px face)
`label`	`string`	`"How was your experience?"`	Accessible name of the radio group
`className`	`string`	-	Additional classes merged with the root container styles

Examples

Sizes

Good

Perfect