Skip to content
Branch: master
Find file History
afercia and gziolo Update the alt text description (#14668)
* Update the alt text description.

* Make the links non-translatable.

* Update help prop documentation.
Latest commit 1e40b28 Mar 28, 2019


ToggleControl is used to generate a toggle user interface.


Render a user interface to change fixed background setting.

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

const MyToggleControl = withState( {
	hasFixedBackground: false,
} )( ( { hasFixedBackground, setState } ) => (
		label="Fixed Background"
		help={ hasFixedBackground ? 'Has fixed background.' : 'No fixed background.' }
		checked={ hasFixedBackground }
		onChange={ () => setState( ( state ) => ( { hasFixedBackground: ! state.hasFixedBackground } ) ) }
) );


The component accepts the following props:


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

  • Type: String
  • Required: No


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

  • Type: String|WPElement
  • Required: No


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


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

  • Type: function
  • Required: Yes


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

You can’t perform that action at this time.