A toggle switch represents a physical switch and is an “either/or” control that allows users to turn things on or off, like a light switch. Similar to flipping a light switch, the effects of that switch are felt immediately. This same characteristic applies to UI toggle switches. Switches should never require users to press a button to apply the settings.

An instant response is required without review or confirmation. A setting requires an on/off or show/hide function.

() => {
  const [checked, setChecked] = React.useState(false);

  return (
    <DocsFlex spacing="md" css={{ backgroundColor: "$grey1", padding: "$lg" }}>
      <Stack align="center">
        <Switch
          label="Bluetooth"
          id="bluetooth"
          checked={checked}
          onCheckedChange={() => setChecked(!checked)}
        />
      </Stack>
    </DocsFlex>
  );
};

Use short, concise labels to provide a clear indication of what will be switched on/off. Avoid prefixes like on, off, enabled, disabled as the state of the switch itself carries that same meaning.

Label positions can be adjusted to suit the layout. The default is left and other options include right, top and bottom.

() => {
  const [checked, setChecked] = React.useState({
    bluetooth: false,
    ePrescriptions: true,
    adminSettings: true,
    eBookings: false,
  });

  return (
    <Stack align="center" spacing="lg">
      <Switch
        id="ePrescriptions2"
        label="ePrescriptions"
        checked={checked.ePrescriptions}
        onCheckedChange={() =>
          setChecked({
            ...checked,
            ePrescriptions: !checked.ePrescriptions,
          })
        }
      />
      <Switch
        id="eBookings"
        label="eBookings"
        labelPosition="right"
        checked={checked.eBookings}
        onCheckedChange={() =>
          setChecked({
            ...checked,
            eBookings: !checked.eBookings,
          })
        }
      />

      <Switch
        label="Bluetooth"
        labelPosition="top"
        id="bluetooth2"
        checked={checked.bluetooth}
        onCheckedChange={() =>
          setChecked({
            ...checked,
            bluetooth: !checked.bluetooth,
          })
        }
      />
      <Switch
        label="Admin Role"
        labelPosition="bottom"
        id="adminSettings"
        checked={checked.adminSettings}
        onCheckedChange={() =>
          setChecked({
            ...checked,
            adminSettings: !checked.adminSettings,
          })
        }
      />

      <Switch label="Disabled Option" disabled id="disabledOption" />
      <Switch
        label="Checked Disabled Option"
        checked={true}
        disabled
        id="disabledOption"
      />
    </Stack>
  );
};

A Switch, similar to a Checkbox, allows the user to pick between binary states by simply clicking the element; the difference between them is the expectations around feedback given to the user after interacting with the component. There are multiple times when you should use a Switch over a Checkbox and vice-versa:

1. Instant Response - Use a Switch when:

• An instant response of applied settings is required without explicit action.
• A setting requires an on/off or show/hide function to display the results.
• The user needs to perform instantaneous actions that do not need a review or confirmation.

2. Settings Confirmation - Use a Checkbox when:

• Applied settings must be confirmed and reviewed by the user before submitting them.
• Defined settings require actions like Submit, OK, Next, and Apply before displaying results.
• The user has to perform additional steps for changes to become effective.

3. Multiple Choices - use a Checkbox when:

• Multiple options are available, and the user has to select one or more options from them.
• Clicking multiple Switches individually and waiting to see results after each click takes extra time.

4. Related Items

• Use a checkbox when:

  • User has to select option(s) from a list of related items.

• Use a Switch when:

  • User is toggling independent features or behaviours.

Adheres to the switch role requirements.

All form controls should have labels, and this includes radio buttons, checkboxes, and switches. In most cases, this is done by using the <label> element.