Toggle

A toggle is used to view or switch between enabled or disabled states.

Usage

Use toggles to let people turn something on or off instantly. For example, if you need to enable public access to a resource.

If a physical switch would work for the action, a toggle is the best component to use.

If you're using a disabled toggle, include information explaining why the option isn't available. You can also use visually hidden to tell people who use screen readers that there is an option that isn't available to them.
Avoid changing the toggle label based on the on or off state. The label should be the same regardless of the current toggle setting.
Label your toggle using id and htmlFor props to set the relationship. For more information see labels on MDN web docs, (opens new window).

Let people know what happens when the toggle is switched by using a tooltip.
Toggles should never require people to press a button to apply the settings.
The toggle component doesn't work within the form component by default. This is because the toggle is supposed to make change happen instantly, not after pressing a submit button. For options that require a button press to apply the setting, use a checkbox.

For all new features, we recommend using Atlassian Design System and other Atlaskit components, (opens new window). For existing code, you can continue to use Atlassian User Interface (AUI), (opens new window).

Use a dropdown menu to select a single option from a list.
Use radio buttons to select a single option from a set of visible options.
For options that require a button press to apply the setting, use a checkbox.
You can use a tooltip to explain what happens when a toggle is switched on or off.

We use this feedback to improve our documentation.