Form

ToggleGroup

Segmented control with single (radio-style) or multiple (pressed-button) selection, roving tab stop and arrow-key navigation.

Import

import { ToggleGroup, ToggleGroupItem } from "@zephora/react";

Examples

Single selection

<ToggleGroup type="single" defaultValue="center" aria-label="Text alignment">
  <ToggleGroupItem value="left">Left</ToggleGroupItem>
  <ToggleGroupItem value="center">Center</ToggleGroupItem>
  <ToggleGroupItem value="right">Right</ToggleGroupItem>
</ToggleGroup>

Multiple selection

In multiple mode each item is an independent aria-pressed toggle.

Active: bold

const [format, setFormat] = React.useState<string[]>(["bold"]);

<ToggleGroup
  type="multiple"
  value={format}
  onValueChange={(v) => setFormat(v as string[])}
  aria-label="Text formatting"
>
  <ToggleGroupItem value="bold">Bold</ToggleGroupItem>
  <ToggleGroupItem value="italic">Italic</ToggleGroupItem>
  <ToggleGroupItem value="underline">Underline</ToggleGroupItem>
</ToggleGroup>
<p>Active: {format.join(", ") || "none"}</p>

Sizes and full width

<ToggleGroup type="single" defaultValue="week" size="sm" aria-label="Range">
  <ToggleGroupItem value="day">Day</ToggleGroupItem>
  <ToggleGroupItem value="week">Week</ToggleGroupItem>
  <ToggleGroupItem value="month">Month</ToggleGroupItem>
</ToggleGroup>
<ToggleGroup type="single" defaultValue="week" fullWidth aria-label="Range wide">
  <ToggleGroupItem value="day">Day</ToggleGroupItem>
  <ToggleGroupItem value="week">Week</ToggleGroupItem>
  <ToggleGroupItem value="month">Month</ToggleGroupItem>
</ToggleGroup>

API

ToggleGroup props

Prop	Type	Default	Description
`type`	`"single" \| "multiple"`	`"single"`	Selection mode.
`value`	`string \| string[]`	—	Controlled value — string for single, string[] for multiple.
`defaultValue`	`string \| string[]`	—	Initial value in uncontrolled mode.
`onValueChange`	`(value: string \| string[]) => void`	—	Called with the new value (string for single, string[] for multiple).
`disabled`	`boolean`	`false`	Disables the whole group.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Item scale.
`fullWidth`	`boolean`	`false`	Stretches the group (and items) to the container width.
`unstyled`	`boolean`	`false`	Headless mode — drops Zephora classes so your own CSS can style it.
`…rest`	`HTMLAttributes<HTMLDivElement>`	—	Forwarded to the group element; provide aria-label or aria-labelledby.

ToggleGroupItem props

Prop	Type	Default	Description
`value` *	`string`	—	Value this item contributes to the group.
`disabled`	`boolean`	`false`	Disables just this item.
`…rest`	`Omit<ButtonHTMLAttributes<HTMLButtonElement>, "value">`	—	All native button props are forwarded.

Keyboard

Key	Action
`Arrow Right / Arrow Down`	Focuses the next item (wraps).
`Arrow Left / Arrow Up`	Focuses the previous item (wraps).
`Home / End`	Focuses the first / last item.
`Enter / Space`	Toggles the focused item.