ToggleGroupControlOption

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.

Usage

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

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

Props

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