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

Basic#

Selected alignment: center

Multiple Selection#

Selected formatting: bold, italic

Sample text with applied formatting

Variants#

Default Variant

Outline Variant

Small Size

Large Size

Custom#

Selected: Indigo

Color: indigo

Custom Toggle Group

This example demonstrates a custom toggle group implementation with color swatches. The selected color is Indigo.

Props

Prop	Type	Default
`$$typeof`	`symbol`	-
`displayName?`	`string`	-
`propTypes?`	`any`	-

Prop	Type	Default
`$$typeof`	`symbol`	-
`displayName?`	`string`	-
`propTypes?`	`any`	-

Toggle

A two-state button that can be either on or off.

Tooltip

A popup that displays information related to an element when the element receives keyboard focus or the mouse hovers over it.