Skip to main contentCarbon Design System

Toggle

Preview the toggle component with the React live demo. For detailed code usage documentation, see the Storybooks for each framework below.

Documentation

Feature flag

A feature flag has been added to adjust its label spacing and changes its visual appearance, not its functionality. For more code-specific feature flag information, refer to the @carbon/react framework. Once the next major release (v12) is released in the future, this feature flag will become the default version of the component.

— The

enable-v12-toggle-reduced-label-spacing
flag reduces the spacing between the toggle label and its container to be 8px instead of 16px.

Live demo



      This live demo contains only a preview of functionality and styles available for this component. View the full demo on Storybook for additional information such as its version, controls, and API documentation.