ToggleGroupControl Edit

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 component.

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 or a CustomSelectControl component instead.

Usage

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>
    );
}

Top ↑

Props

Top ↑

help: ReactNode

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

  • Required: No

Top ↑

hideLabelFromVision: boolean

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

  • Required: No
  • Default: false

Top ↑

isAdaptiveWidth: boolean

Determines if segments should be rendered with equal widths.

  • Required: No
  • Default: false

Top ↑

isBlock: boolean

Renders ToggleGroupControl as a (CSS) block element.

  • Required: No
  • Default: false

Top ↑

label: string

Label for the form element.

  • Required: Yes

Top ↑

onChange: ( value?: string | number ) => void

Callback when a segment is selected.

  • Required: No
  • Default: () => {}

Top ↑

value: string | number

The value of the ToggleGroupControl.

  • Required: No