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.

Variants

With a label

Whenever using Switch, always 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>
          );
        }

Disabled and switched combinations

function SwitchExample() {
  return (
    <Flex alignItems="center" gap={8}>
      <Flex direction="column" gap={2}>
        <Label htmlFor="base">
          <Text>Base state</Text>
        </Label>
        <Switch
          onChange={() => {}}
          id="base"
          switched={false}
        />
      </Flex>
      <Flex direction="column" gap={2}>
      <Label htmlFor="switched">
        <Text>Switched</Text>
      </Label>
      <Switch
        onChange={() => {}}
        id="switched"
        switched={true}
      />
    </Flex>
    <Flex direction="column" gap={2}>
        <Label htmlFor="disabled">
          <Text>Disabled, not switched</Text>
        </Label>
        <Switch
          onChange={() => {}}
          id="disabled"
          switched={false}
          disabled={true}
        />
      </Flex>
      <Flex direction="column" gap={2}>
        <Label htmlFor="disabledAndSwitched">
          <Text>Disabled and switched</Text>
        </Label>
        <Switch
          onChange={() => {}}
          id="disabledAndSwitched"
          switched={true}
          disabled={true}
        />
      </Flex>
    </Flex>
  );
}

function SwitchExample() {
  return (
    <Flex alignItems="center" gap={8}>
      <Flex direction="column" gap={2}>
        <Label htmlFor="base">
          <Text>Base state</Text>
        </Label>
        <Switch
          onChange={() => {}}
          id="base"
          switched={false}
        />
      </Flex>
      <Flex direction="column" gap={2}>
      <Label htmlFor="switched">
        <Text>Switched</Text>
      </Label>
      <Switch
        onChange={() => {}}
        id="switched"
        switched={true}
      />
    </Flex>
    <Flex direction="column" gap={2}>
        <Label htmlFor="disabled">
          <Text>Disabled, not switched</Text>
        </Label>
        <Switch
          onChange={() => {}}
          id="disabled"
          switched={false}
          disabled={true}
        />
      </Flex>
      <Flex direction="column" gap={2}>
        <Label htmlFor="disabledAndSwitched">
          <Text>Disabled and switched</Text>
        </Label>
        <Switch
          onChange={() => {}}
          id="disabledAndSwitched"
          switched={true}
          disabled={true}
        />
      </Flex>
    </Flex>
  );
}

Edit page on GitHub