Switch usage guidelines

Switches are used for binary actions that take effect immediately. They are typically used for on/off states where the change is applied instantly without requiring a submit action.

When to use

• When a user needs to choose between two binary options.
• When the change should be applied immediately.
• When a setting needs to be quickly toggled on or off.
• When representing a persistent preference or setting.

When not to use

• When the choices do not represent an on/off state.
• When the change requires an explicit save action.

In the cases above, use checkboxes for multiple selection or radio buttons for single selection.

Examples

Preview

Bluetooth

Code

import { Switch } from '@cimpress-ui/react';

export default function Demo() {
  return <Switch>Bluetooth</Switch>;
}

Copy code Open in playground

States

Preview

Unselected

Selected

Read-only

Disabled

Code

import { Stack, Switch } from '@cimpress-ui/react';

export default function Demo() {
  return (
    <Stack gap={16}>
      <Switch>Unselected</Switch>
      <Switch defaultSelected>Selected</Switch>
      <Switch isReadOnly>Read-only</Switch>
      <Switch isDisabled>Disabled</Switch>
    </Stack>
  );
}

Copy code Open in playground

Label position

Preview

Label at the end

Label at the end (full-width)

Label at the start

Label at the start (full-width)

Label on top

Code

import { Stack, Switch } from '@cimpress-ui/react';

export default function Demo() {
  return (
    <Stack gap={48}>
      <Stack gap={16}>
        <Switch labelPosition="end">Label at the end</Switch>
        <Switch labelPosition="end" fullWidth>
          Label at the end (full-width)
        </Switch>
      </Stack>

      <Stack gap={16}>
        <Switch labelPosition="start">Label at the start</Switch>
        <Switch labelPosition="start" fullWidth>
          Label at the start (full-width)
        </Switch>
      </Stack>

      <Switch labelPosition="top">Label on top</Switch>
    </Stack>
  );
}

Copy code Open in playground

Formatting and layout

Placement

• Switches can be placed inside content areas, such as settings pages.
• Position switches close to the content they affect, top-right of a page or section.
• Multiple switches can be grouped vertically for related settings.
• The label of the switch can be positioned to the start of, end of, or above the switch control.
• The description is always placed below the label and the switch control.

Content writing

• Clearly describe what the switch controls.
• Use sentence case for switch labels.
• Do not include the words “on” or “off” in the label. The label must remain the same regardless of the switch state.
• End the description with a period or equivalent punctuation mark. This helps screen reader users understand where the description ends, and it improves readability for all users.

Do

Sharing attachments

Product alerts

Don't

Allow users to share attachments?

Turn on product alerts

Behaviors

Interaction

• Switch should apply changes instantly, with no “Submit” button required.
• Pressing the switch toggles between the “on” and “off” state.
• Pressing the label has the same effect as pressing the switch.