Switch

View source on GitHub

Use switches for single cell options that can be turned on and off only.
If you have a cell with multiple options that can activated, consider using check marks.
Switch component supports right-to-left(RTL) language locales layout
(auto flip on RTL locales like Arabic).

Props

Component props
Name	Type	Default
`id` Required	`string`	-
`onChange` Required	`({ event: SyntheticInputEvent<>, value: boolean }) => void`	-
`disabled`	`boolean`	`false`
`name`	`string`	-
`switched`	`boolean`	`false`

Usage guidelines

When to Use

For a binary option that can be either active or inactive.
Typically used on mobile, where toggling the Switch takes immediate effect.

When Not to Use

Choosing between related options. Each Switch should be considered a solitary, standalone option. For multiple, related choices, use Checkboxes or RadioButtons instead.

Example: Using a label

Whenever you are using a Switch component, you should use a Label with it to make your component accessible.

Airplane mode

function SwitchExample() {
  const [switched, setSwitched] = React.useState(false);

  return (
    <Box display="flex" alignItems="center">
      <Box paddingX={2}>
        <Label htmlFor="emailNotifications">
          <Text>Airplane mode</Text>
        </Label>
      </Box>
      <Switch
        onChange={() => setSwitched(!switched)}
        id="emailNotifications"
        switched={switched}
      />
    </Box>
  );
}

function SwitchExample() {
  const [switched, setSwitched] = React.useState(false);
  return (
    <Box display="flex" alignItems="center">
      <Box paddingX={2}>
        <Label htmlFor="emailNotifications">
          <Text>Airplane mode</Text>
        </Label>
      </Box>
      <Switch
        onChange={() => setSwitched(!switched)}
        id="emailNotifications"
        switched={switched}
      />
    </Box>
  );
}

Combinations

Switch 1

switched

Switch 2

disabled

Switch 3

disabled

switched

Switch 4

Edit page on GitHub