Skip to main content

Toggle

Component
Live

The Toggle component allow users to switch between two states.

Figma(opens in new window)Code(opens in new window)

Usage​

Toggles enable users to quickly switch between two mutually exclusive states, always maintaining a default value. These states are typically on/off or active/inactive. Toggles provide a clear visual indication of the current state, with actions taking effect immediately, requiring no further action by the user. This helps users understand the impact of their actions and ensures efficient control of settings and options.

Install​

yarn add @iag/chroma-react-ui.components

Import​

import { Toggle } from "@iag/chroma-react-ui.components";

When to use​

Use Toggles for features or capabilities that require an on/off or active/inactive function. The feature or capability should be independent, with effects that start immediately without needing to be saved. Toggle functions should also be reversible without requiring additional confirmation, such as for features, settings, or notification preferences.

When to avoid​

Avoid using Toggles:

  • For more than two options; consider a select or radios instead.
  • For multiple-choice questions; consider checkboxes instead.
  • When a submit button is needed to apply or save a selection; consider a checkbox instead.
  • For critical or irreversible actions like deleting an account or making a purchase; consider buttons with confirmation modals to ensure users understand the impact of their actions.

Do

  • Do have a visible, on-screen label.
  • Do keep labels short and direct.
  • Do start all labels with a capital letter and write in sentence case.
  • Ensure the label describes the state of the control when in the on/active state.
  • If a toggle is displayed in a disabled state, explain why the option isn't available.

Don't

  • Don't use the words "on" or "off" in the label; the on/off state is implied and therefore redundant.
  • Don't overload the label with too much content.
  • Don't use commas or semicolons at the end of the label.
  • Don't change the toggle label based on the on or off state; the label should remain the same regardless of the current toggle setting.
  • Don't use too many toggles in one interface, as it can overwhelm the user.
  • Don't place toggles in locations where they are not easily discoverable by the user.