Automattic Design System

ToggleControl

ToggleControl is used to generate a toggle user interface.

import { ToggleControl } from '@wordpress/components';

LinksPermalink to this section

View on Storybook

View source on GitHub

PropsPermalink to this section

Name	Default	Description
`disabled`		`boolean` If disabled is true the toggle will be disabled and apply the appropriate styles.
`checked`		`boolean` If checked is true the toggle will be checked. If checked is false the toggle will be unchecked. If no value is passed the toggle will be unchecked.
`className`		`string`
`__nextHasNoMarginBottom`		`boolean` Start opting into the new margin-free styles that will become the default in a future version.
`help`		`ReactNode \| ((checked: boolean) => ReactNode)`
`label` Required		`ReactNode` The label for the toggle.
`onChange` Required		`(value: boolean) => void` A callback function invoked when the toggle is clicked.

ExamplesPermalink to this section

DefaultPermalink to this section

const Default = () => <ControlledToggleControl label="Enable something" />;

With Help TextPermalink to this section

const WithHelpText = () => <ToggleControl help="This is some help text." />;

With VisualPermalink to this section

When adding a visual aid, prefer placing it at the trailing end of the row, rather than placing it directly before the label, or moving the toggle to the trailing end.

const WithVisual = () => <Stack gap="md" align="flex-start" justify="space-between">
    <Stack>
        <ControlledToggleControl
            help="Additional context that helps users understand what this setting does and when they might want to turn it on or off." />
    </Stack>
    <Stack
        align="center"
        justify="center"
        style={ {
            backgroundColor:
                'var(--wpds-color-background-surface-neutral-weak)',
            borderRadius: 'var(--wpds-border-radius-md)',
            flexShrink: 0,
            height: 'var(--wpds-dimension-size-lg)',
            width: 'var(--wpds-dimension-size-lg)',
        } }>
        <Icon icon={ wordpress } />
    </Stack>
</Stack>;