Switch

Overview

A Switch is an input that toggles a feature or setting on or off - the states must be mutually exclusive.

When to use:

  • Switches toggle between an “on” and an “off” state; one must always be selected.
  • A Switch's impact should be immediate. Therefore it is not appropriate to use a Switch in a form.
  • Switches should be used if each item in a list or set can be individually controlled.

Implementation

Switches are a stylized input[type="checkbox"] with controllable checked/unchecked states.

Edit the code below to see your changes live!

function Example() {
  const [checked, setChecked] = useState(false);
  const handleChange = () => setChecked(!checked);

  return <Switch checked={checked} onChange={handleChange} />;
}

Props

Supports all native <input /> element attributes.

Do's and Don'ts

Do
Place the Switch in the same row as the label for the setting it controls, to the left of the switch.
If the Switch appears in a table, label the control at the header of the column with 1-3 words.
When a user toggles a Switch, the action should take effect immediately.
Label the Switch using non-neutral adjectives or nouns (e.g., “visibility”), not verbs (e.g., “show product”).
Labels should clearly indicate the state of the Switch (i.e., on or off) so the user knows what to expect when the Switch is toggled. Let users know about any non-obvious and/or important consequences of toggling the Switch.
Label should be static.
Don't
Don’t include the text "on" and "off" next to the Switch. The Switch alone should be sufficient to indicate status.
Don’t use Switches for actions that do not have immediate effect, or those that require a Save or Confirm button. A single checkbox or radio buttons are better suited for these instances.
Don’t use Switches for settings that have ambiguous options. Switches should be used to toggle between “on” and “off.”
Don’t use radio buttons, checkboxes, or other methods to indicate a setting is “on” or “off.”
Don’t flip the Switch upside down; “on” should always be to the right.