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 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>
);
}
Props Props
help: ReactNode help: ReactNode
If this property is added, a help text will be generated using help property as the content.
- Required: No
hideLabelFromVision: boolean hideLabelFromVision: boolean
If true, the label will only be visible to screen readers.
- Required: No
- Default:
false
isAdaptiveWidth: boolean isAdaptiveWidth: boolean
Determines if segments should be rendered with equal widths.
- Required: No
- Default:
false
isBlock: boolean isBlock: boolean
Renders ToggleGroupControl as a (CSS) block element.
- Required: No
- Default:
false
label: string label: string
Label for the form element.
- Required: Yes
onChange: ( value?: string | number ) => void onChange: ( value?: string | number ) => void
Callback when a segment is selected.
- Required: No
- Default:
() => {}
value: string | number value: string | number
The value of the ToggleGroupControl.
- Required: No