Switch

View source on GitHub

Use Switch 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 Checkbox.

Switch supports right-to-left(RTL) language locales layout (auto flip on RTL locales like Arabic).

Props

Component props
Name	Type	Default
`id` Required	`string`	-
	A unique identifier for the element.
`onChange` Required	`({\| event: SyntheticInputEvent<>, value: boolean \|}) => void`	-
	Callback triggered when the user interacts with the input.
`disabled`	`boolean`	`false`
	Indicates if the input is currently disabled. See Switch combinations for more details.
`name`	`string`	-
	A unique name for the element.
`switched`	`boolean`	`false`
	Indicates the current value of the input. See Switch combinations for more details.

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.

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