ToggleGroupControlOptionIcon Edit

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

ToggleGroupControlOptionIcon is a form component which is meant to be used as a child of [ToggleGroupControl] and displays an icon(<(/packages/components/src/toggle-group-control/toggle-group-control/README.md)>).

Usage

import {
    __experimentalToggleGroupControl as ToggleGroupControl,
    __experimentalToggleGroupControlOptionIcon as ToggleGroupControlOptionIcon,
} from '@wordpress/components';
import { formatLowercase, formatUppercase } from '@wordpress/icons';

function Example() {
    return (
        <ToggleGroupControl>
            <ToggleGroupControlOptionIcon
                value="uppercase"
                icon={ formatUppercase }
                label="Uppercase"
            />
            <ToggleGroupControlOptionIcon
                value="lowercase"
                icon={ formatLowercase }
                label="Lowercase"
            />
        </ToggleGroupControl>
    );
}

Top ↑

Props

Top ↑

value: string | number

The value of the ToggleGroupControlOption.

  • Required: Yes

Top ↑

icon: WPComponent

Icon displayed as the content of the option. Usually one of the icons from the @wordpress/icons package, or a custom React <svg> icon.

  • Required: Yes

Top ↑

label: string

The text to accessibly label the icon option. Will also be shown in a tooltip.

  • Required: Yes