Toggle Group
A set of two-state buttons that can be toggled on or off, with either single or multiple selection.
When To Use
Use the Toggle Group component when you need to:
- Allow users to select a single option or multiple options from a group
- Create segmented controls or button groups for selecting options
- Implement toolbar-like controls for formatting or view modes
- Provide a group of related toggle options that should be visually connected
- Create radio button alternatives with a more button-like appearance
Toggle Groups are particularly useful for presenting a set of related choices where the user needs to see all options at once.
Examples
Selected alignment: center
Selected formatting: bold, italic
Sample text with applied formatting
Default Variant
Outline Variant
Small Size
Large Size
Selected: Indigo
Color: indigo
Custom Toggle Group
This example demonstrates a custom toggle group implementation with color swatches. The selected color is Indigo.
Props
ToggleGroup
| Prop | Type | Default |
|---|---|---|
orientation? | "horizontal" | "vertical" | - |
loop? | boolean | - |
rovingFocus? | boolean | true |
disabled? | boolean | false |
onValueChange? | ((value: string) => void) | ((value: string[]) => void) | - |
value? | string | string[] | - |
type | "single" | "multiple" | - |
asChild? | boolean | - |
key? | Key | null | - |
size? | "default" | "sm" | "lg" | null | - |
variant? | "default" | "outline" | null | - |
ToggleGroupItem
| Prop | Type | Default |
|---|---|---|
asChild? | boolean | - |
value | string | - |
type? | "button" | "submit" | "reset" | - |
name? | string | - |
formTarget? | string | - |
formNoValidate? | boolean | - |
formMethod? | string | - |
formEncType? | string | - |
formAction? | string | ((formData: FormData) => void | Promise<void>) | - |
disabled? | boolean | - |
key? | Key | null | - |
form? | string | - |