Checkbox group
Updated
CheckboxGroup is a set of native checkboxes in a fieldset, drawn as square pixel boxes. An optional select-all box checks or clears every enabled option and shows a bar while only some are checked. 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 { CheckboxGroup } from "@/components/dithercharts/checkbox-group"
<CheckboxGroup
legend="Platforms"
name="platforms" // the form gets one entry per checked value
selectAll="All platforms"
options={[
{ value: "web", label: "Web" },
{ value: "ios", label: "iOS" },
{ value: "android", label: "Android" },
]}
onValueChange={(values) => setPlatforms(values)}
/>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 checkbox-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 CheckboxOption[] | Default – | |
| value | Type readonly string[] | Default – | The checked options' values, for a controlled group; pair it with onValueChange. |
| defaultValue | Type readonly string[] | Default – | The options checked at first, for an uncontrolled group. |
| onValueChange | Type (value: string[]) => void | Default – | Called with the checked values, in the options' order. |
| name | Type string | Default – | The checkboxes' form field name; the form gets one entry per checked value. |
| orientation | Type "vertical" | "horizontal" | Default "vertical" | Stack the options, or lay them out in a wrapping row. |
| selectAll | Type ReactNode | Default none | The label of a parent checkbox above the options that checks or clears them all, with a bar while only some are checked. |
| disabled | Type boolean | Default false | Disables every option. |
| className | Type string | Default – |