Title: ToggleGroupControl
Published: August 20, 2021
Last modified: September 25, 2026

---

# ToggleGroupControl

## In this article

 * [Usage](https://developer.wordpress.org/block-editor/reference-guides/components/toggle-group-control/?output_format=md#usage)
 * [Props](https://developer.wordpress.org/block-editor/reference-guides/components/toggle-group-control/?output_format=md#props)
    - [help: ReactNode](https://developer.wordpress.org/block-editor/reference-guides/components/toggle-group-control/?output_format=md#help-reactnode)
    - [hideLabelFromVision: boolean](https://developer.wordpress.org/block-editor/reference-guides/components/toggle-group-control/?output_format=md#hidelabelfromvision-boolean)
    - [isAdaptiveWidth: boolean](https://developer.wordpress.org/block-editor/reference-guides/components/toggle-group-control/?output_format=md#isadaptivewidth-boolean)
    - [isDeselectable: boolean](https://developer.wordpress.org/block-editor/reference-guides/components/toggle-group-control/?output_format=md#isdeselectable-boolean)
    - [isBlock: boolean](https://developer.wordpress.org/block-editor/reference-guides/components/toggle-group-control/?output_format=md#isblock-boolean)
    - [label: string](https://developer.wordpress.org/block-editor/reference-guides/components/toggle-group-control/?output_format=md#label-string)
    - [onChange: ( value?: string | number ) => void](https://developer.wordpress.org/block-editor/reference-guides/components/toggle-group-control/?output_format=md#onchange-value-string-number-void)
    - [value: string | number](https://developer.wordpress.org/block-editor/reference-guides/components/toggle-group-control/?output_format=md#value-string-number)
    - [disabled: boolean](https://developer.wordpress.org/block-editor/reference-guides/components/toggle-group-control/?output_format=md#disabled-boolean)

[ Back to top](https://developer.wordpress.org/block-editor/reference-guides/components/toggle-group-control/?output_format=md#wp--skip-link--target)

This feature is still experimental. “Experimental” means this is an early implementation
subject to drastic and breaking changes.

`ToggleGroupControl` is a form component that lets users choose options represented
in horizontal segments. To render options for this control use [`ToggleGroupControlOption`](https://developer.wordpress.org/block-editor/reference-guide/components/toggle-group-control/toggle-group-control-option/)
component.

This component is intended for selecting a single persistent value from a set of
options, similar to a how a radio button group would work. If you simply want a 
toggle to switch between views, use [`Tabs` from `@wordpress/ui`](https://wordpress.github.io/gutenberg/?path=/docs/design-system-components-tabs--docs)
instead.

Only use this control when you know for sure the labels of items inside won’t wrap.
For items with longer labels, you can consider a [`SelectControl`](https://developer.wordpress.org/block-editor/reference-guide/components/select-control/)
or a [`CustomSelectControl`](https://developer.wordpress.org/block-editor/reference-guide/components/custom-select-control/)
component instead.

## 󠀁[Usage](https://developer.wordpress.org/block-editor/reference-guides/components/toggle-group-control/?output_format=md#usage)󠁿

    ```javascript
    import {
        __experimentalToggleGroupControl as ToggleGroupControl,
        __experimentalToggleGroupControlOption as ToggleGroupControlOption,
    } from '@wordpress/components';

    function Example() {
        return (
            <ToggleGroupControl label="my label" value="vertical" isBlock>
                <ToggleGroupControlOption value="horizontal" label="Horizontal" />
                <ToggleGroupControlOption value="vertical" label="Vertical" />
            </ToggleGroupControl>
        );
    }
    ```

## 󠀁[Props](https://developer.wordpress.org/block-editor/reference-guides/components/toggle-group-control/?output_format=md#props)󠁿

### 󠀁[help: ReactNode](https://developer.wordpress.org/block-editor/reference-guides/components/toggle-group-control/?output_format=md#help-reactnode)󠁿

If this property is added, a help text will be generated using help property as 
the content.

 * Required: No

### 󠀁[hideLabelFromVision: boolean](https://developer.wordpress.org/block-editor/reference-guides/components/toggle-group-control/?output_format=md#hidelabelfromvision-boolean)󠁿

If true, the label will only be visible to screen readers.

 * Required: No
 * Default: `false`

### 󠀁[isAdaptiveWidth: boolean](https://developer.wordpress.org/block-editor/reference-guides/components/toggle-group-control/?output_format=md#isadaptivewidth-boolean)󠁿

Determines if segments should be rendered with equal widths.

 * Required: No
 * Default: `false`

### 󠀁[isDeselectable: boolean](https://developer.wordpress.org/block-editor/reference-guides/components/toggle-group-control/?output_format=md#isdeselectable-boolean)󠁿

Whether an option can be deselected by clicking it again.

 * Required: No
 * Default: `false`

### 󠀁[isBlock: boolean](https://developer.wordpress.org/block-editor/reference-guides/components/toggle-group-control/?output_format=md#isblock-boolean)󠁿

Renders `ToggleGroupControl` as a (CSS) block element, spanning the entire width
of the available space. This is the recommended style when the options are text-
based and not icons.

 * Required: No
 * Default: `false`

### 󠀁[label: string](https://developer.wordpress.org/block-editor/reference-guides/components/toggle-group-control/?output_format=md#label-string)󠁿

Label for the form element.

 * Required: Yes

### 󠀁[onChange: ( value?: string | number ) => void](https://developer.wordpress.org/block-editor/reference-guides/components/toggle-group-control/?output_format=md#onchange-value-string-number-void)󠁿

Callback when a segment is selected.

 * Required: No
 * Default: `() => {}`

### 󠀁[value: string | number](https://developer.wordpress.org/block-editor/reference-guides/components/toggle-group-control/?output_format=md#value-string-number)󠁿

The value of the `ToggleGroupControl`.

 * Required: No

### 󠀁[disabled: boolean](https://developer.wordpress.org/block-editor/reference-guides/components/toggle-group-control/?output_format=md#disabled-boolean)󠁿

If true, every option is unselectable. The selected value is left as-is.

 * Required: No
 * Default: `false`

First published

August 20, 2021

Last updated

September 25, 2026

Edit article

[ Improve it on GitHub: ToggleGroupControl ](https://github.com/WordPress/gutenberg/edit/trunk/packages/components/src/toggle-group-control/toggle-group-control/README.md)

[  Previous: ToggleGroupControlOption](https://developer.wordpress.org/block-editor/reference-guides/components/toggle-group-control-option/)

[  Next: ToolbarButton](https://developer.wordpress.org/block-editor/reference-guides/components/toolbar-button/)