ToggleControl Edit

ToggleControl is used to generate a toggle user interface.

Usage #Usage

Render a user interface to change fixed background setting.

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

const MyToggleControl = () => {
    const [ hasFixedBackground, setHasFixedBackground ] = useState( false );

    return (
        <ToggleControl
            label="Fixed Background"
            help={
                hasFixedBackground
                    ? 'Has fixed background.'
                    : 'No fixed background.'
            }
            checked={ hasFixedBackground }
            onChange={ () => {
                setHasFixedBackground( ( state ) => ! state );
            } }
        />
    );
};

Top ↑

Props #Props

The component accepts the following props:

Top ↑

label #label

If this property is added, a label will be generated using label property as the content.

• Type: String
• Required: No

Top ↑

help #help

If this property is added, a help text will be generated using help property as the content.

• Type: String|WPElement
• Required: No

Top ↑

checked #checked

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.

• Type: Boolean
• Required: No

Top ↑

disabled #disabled

If disabled is true the toggle will be disabled and apply the appropriate styles.

• Type: Boolean
• Required: No

Top ↑

onChange #onChange

A function that receives the checked state (boolean) as input.

• Type: function
• Required: No

Top ↑

className #className

The class that will be added with components-base-control and components-toggle-control to the classes of the wrapper div. If no className is passed only components-base-control and components-toggle-control are used.

Type: String
Required: No