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

ToggleGroupControlOption is a form component and is meant to be used as a child of ToggleGroupControl.


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

function Example() {
    return (
        <ToggleGroupControl label="my label" value="vertical" isBlock>
                showTooltip={ true }
            <ToggleGroupControlOption value="vertical" label="Vertical" />


label: string

Label for the option. If needed, the aria-label prop can be used in addition to specify a different label for assistive technologies.

  • Required: Yes

value: string | number

The value of the ToggleGroupControlOption.

  • Required: Yes

showTooltip: boolean

Whether to show a tooltip when hovering over the option. The tooltip will attempt to use the aria-label prop text first, then the label prop text if no aria-label prop is found.

  • Required: No