Radio group
Updated
RadioGroup is a set of native radios in a fieldset, drawn as stepped pixel rings. The arrow keys move the choice, and the checked ring gets a pixel dot. 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 { RadioGroup } from "@/components/dithercharts/radio-group"
<RadioGroup
legend="Range"
defaultValue="30d"
options={[
{ value: "7d", label: "7 days" },
{ value: "30d", label: "30 days" },
{ value: "90d", label: "90 days" },
{ value: "1y", label: "1 year", disabled: true },
]}
/>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 radio-group
Props
It renders a native element, so every other attribute that element takes passes through.
| Prop | Type | Default | Description |
|---|---|---|---|
| legendrequired | Type ReactNode | Default – | The group's caption, read before its options. |
| optionsrequired | Type readonly RadioOption[] | Default – | |
| value | Type string | Default – | The checked option's value, for a controlled group; pair it with onValueChange. |
| defaultValue | Type string | Default – | The option checked at first, for an uncontrolled group. |
| onValueChange | Type (value: string) => void | Default – | |
| name | Type string | Default a generated id | The radios' form field name. |
| orientation | Type "vertical" | "horizontal" | Default "vertical" | Stack the options, or lay them out in a wrapping row. |
| disabled | Type boolean | Default false | Disables every option. |
| className | Type string | Default – |