Toggle group

Updated October 5, 2026

ToggleGroup is a segmented control: joined ink segments over native radios, or checkboxes when several can be on. Chosen segments go solid, and arrow keys move a single choice. 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 { ToggleGroup } from "@/components/dithercharts/toggle-group"

<ToggleGroup
  label="Range"
  defaultValue={["30d"]}
  options={[
    { value: "7d", label: "7D" },
    { value: "30d", label: "30D" },
    { value: "90d", label: "90D" },
    { value: "1y", label: "1Y", disabled: true },
  ]}
/>
<ToggleGroup
  label="Series"
  multiple
  defaultValue={["revenue", "profit"]}
  options={[
    { value: "revenue", label: "Revenue" },
    { value: "costs", label: "Costs" },
    { value: "profit", label: "Profit" },
  ]}
/>

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 toggle-group

Props

It renders a native element, so every other attribute that element takes passes through.

ToggleGroup props
Prop	Type	Default	Description
labelrequired	Type ReactNode	Default –	The group's caption, read before its segments.
hideLabel	Type boolean	Default `false`	Keeps the caption for screen readers only, e.g. for a range switcher in a chart's header.
optionsrequired	Type readonly ToggleOption[]	Default –
multiple	Type boolean	Default `false`	Lets several segments be on at once (checkboxes) instead of exactly one (radios).
value	Type readonly string[]	Default –	The chosen values, for a controlled group; pair it with `onValueChange`. One at most unless `multiple`.
defaultValue	Type readonly string[]	Default –	The values chosen at first, for an uncontrolled group.
onValueChange	Type (value: string[]) => void	Default –	Called with the chosen values, in option order.
name	Type string	Default a generated id	The inputs' form field name.
disabled	Type boolean	Default `false`	Disables every segment.
className	Type string	Default –