Carbon Design System
Preview

Toggle

Stable
Last updated Aug 11, 2026
Carbon Core

A toggle lets users quickly switch between two states and is commonly used for on/off settings and controls.

Toggle

Documentation

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

React
React icon
Web Components
Web Components icon
Angular (Community)
Angular icon
Vue (Community)
Vue icon

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.

      Feedback

      Help us improve by providing feedback, asking questions, requesting features, or leaving any other comments on GitHub.

      Toggle | Carbon Design System