ToggleGroup

inputs

A set of two-state buttons that can be toggled on or off.

Preview

Installation

npm install @launchapp/design-system

Import

import { ToggleGroup, ToggleGroupItem } from "@launchapp/design-system";

Examples

Single Toggle Group

<ToggleGroup type="single">  <ToggleGroupItem value="left">Left</ToggleGroupItem>  <ToggleGroupItem value="center">Center</ToggleGroupItem>  <ToggleGroupItem value="right">Right</ToggleGroupItem></ToggleGroup>

Props

Prop	Type	Default	Description
`type`*	`"single" \| "multiple"`	—	Whether a single or multiple items can be selected.
`value`	`string \| string[]`	—	Controlled selected value(s).
`onValueChange`	`(value: string \| string[]) => void`	—	Callback when value changes.
`variant`	`"default" \| "outline"`	`"default"`	Visual variant.
`size`	`"sm" \| "md" \| "lg"`	`"md"`	Size.
`disabled`	`boolean`	`false`	Disables all items.

← PreviousToggle

Next →Toolbar