Toggle Group

Segmented control of toggle buttons. Single mode slides one pill to the pressed item (view mode, billing period); multiple mode toggles items independently (bold, italic). Arrow keys move between items.

npx @kznlabs/labsui add toggle-group

grid view · billed yearly · bold

"use client";import { LayoutGrid, List } from "lucide-react";import { useState } from "react";import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";export function ViewSwitch() {  const [view, setView] = useState("grid");  return (    <ToggleGroup aria-label="View" value={view} onValueChange={setView}>      <ToggleGroupItem value="grid" aria-label="Grid view">        <LayoutGrid />      </ToggleGroupItem>      <ToggleGroupItem value="list" aria-label="List view">        <List />      </ToggleGroupItem>    </ToggleGroup>  );}

<ToggleGroup>

Segmented control as a set of toggle buttons (aria-pressed). Arrow keys, Home and End move between items. Single mode: one pill springs to the pressed item, always behind labels.

defaultValue
string | string[]
Value, or values when type="multiple", at first render (uncontrolled).
onValueChange
((value: string) => void) | ((value: string[]) => void)
Called with the pressed item's value, or every pressed value when type="multiple".
size
"sm" | "default"
Item height.
type
"single" | "multiple"
"single": one choice at a time (view mode, billing period), a pill slides between items. "multiple": independent toggles (bold, italic, filters).
value
string | string[]
Controlled value, or values when type="multiple"; pair with onValueChange.

Prop	Type	Default
`defaultValue` Value, or values when `type="multiple"`, at first render (uncontrolled).	`string \| string[]`	—
`onValueChange` Called with the pressed item's value, or every pressed value when `type="multiple"`.	`((value: string) => void) \| ((value: string[]) => void)`	—
`size` Item height.	`"sm" \| "default"`	—
`type` "single": one choice at a time (view mode, billing period), a pill slides between items. "multiple": independent toggles (bold, italic, filters).	`"single" \| "multiple"`	—
`value` Controlled value, or values when `type="multiple"`; pair with `onValueChange`.	`string \| string[]`	—

Also accepts every <div> prop.

<ToggleGroupItem>

One segment. Icon-only items need an aria-label.

value*
string
Value reported when pressed.

Prop	Type	Default
`value*` Value reported when pressed.	`string`	—

Also accepts every <button> prop.

* required. Every component also takes className.