Rating
Updated
Rating is a row of pixel stars over native radios in a fieldset, so the arrow keys change the rating and a form gets its number. Stars up to the rating are solid ink, and hovering previews one in a dithered fill. Like the charts, it takes your theme's ink and paper, light or dark, and needs no Tailwind.
Example
import "@/components/dithercharts/controls.css"
import { Rating } from "@/components/dithercharts/rating"
<Rating legend="Chart quality" name="quality" defaultValue={4} onValueChange={(stars) => setQuality(stars)} />
<Rating legend="Effort" max={10} />Install
Controls install with DitherCharts Pro. See Installation to log in, then import controls.css once, e.g. in your root layout.
npx dithercharts add rating
Props
It renders a native element, so every other attribute that element takes passes through.
| Prop | Type | Default | Description |
|---|---|---|---|
| legendrequired | Type ReactNode | Default – | The rating's caption, read before its stars. |
| value | Type number | Default – | The chosen rating, 1 to max, for a controlled rating; pair it with onValueChange. |
| defaultValue | Type number | Default – | The rating chosen at first, for an uncontrolled rating. |
| onValueChange | Type (value: number) => void | Default – | |
| max | Type number | Default 5 | The number of stars. |
| name | Type string | Default a generated id | The stars' form field name. |
| disabled | Type boolean | Default false | |
| className | Type string | Default – |