Toggle group

stable

A set of pressable toggles for switching views or formatting text.

since v2.41.4 kB gzip

Preview

Code

View: grid · Marks: bold

Installation

CLI

Manual

npm

pnpm

bun

yarn

$ npx @strata/cli add toggle-group

Usage

React

Import only

import { ToggleGroup, Toggle } from "@/components/strata";

<ToggleGroup defaultSelectedKeys={["grid"]}>
  <Toggle id="grid">Grid</Toggle>
  <Toggle id="list">List</Toggle>
</ToggleGroup>

Props

Prop	Type	Default
`selectionMode` How many items can be pressed at once.	"single" \| "multiple"	"single"
`selectedKeys` Controlled pressed items.	Iterable<Key>	—
`variant` Group appearance.	"attached" \| "segmented" \| "spaced"	"attached"
`isDisabled` Prevents interaction and dims the control.	boolean	false

Accessibility

Button

Triggers an action. Six variants, four sizes and a built-in pending state.

Was this page helpful?

Documented since v2.4 · components/toggle-group.mdx