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 ); } } /> ); };
Props Props
The component accepts the following props:
label label
If this property is added, a label will be generated using label property as the content.
- Type:
String
- Required: No
help help
If this property is added, a help text will be generated using help property as the content.
- Type:
String|WPElement
- Required: No
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
disabled disabled
If disabled is true the toggle will be disabled and apply the appropriate styles.
- Type:
Boolean
- Required: No
onChange onChange
A function that receives the checked state (boolean) as input.
- Type:
function
- Required: No
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