Switch

const Preview = () => {
  return <Switch label='Switch' />;
};

render(<Preview />)

Use the Switch when

• the choice controls a function or setting that can be turned on or off
• the change takes effect immediately when the user toggles the switch

Avoid using the Switch when

• users are answering questions in forms, use Radio or Checkbox instead
• content should switch between two categories, use ToggleGroup instead
• content should be filtered, use Chip instead

Example

Grouping

Use Fieldset to group multiple Switch components together.

const GroupEn = () => {
  return (
    <Fieldset>
      <Fieldset.Legend>Turn lights on/off</Fieldset.Legend>
      <Switch label='Living room' checked />
      <Switch label='Kitchen' />
      <Switch label='Bathroom' />
      <Switch
        label='Bedroom'
        description='Unable to connect to the light bulbs'
        readOnly
      />
    </Fieldset>
  );
};

render(<GroupEn />)

Right aligned

Sometimes it can be useful to right-align a Switch, for example when it is placed in a table or within a fixed layout.

const RightAligned2En = () => (
  <div
    style={{
      flexDirection: 'column',
      width: '100%',
      maxWidth: '380px',
    }}
  >
    <Divider />

    <Field
      position='end'
      style={{
        alignItems: 'center',
        padding: 'var(--ds-size-2) 0',
      }}
    >
      <Label>Airplane mode</Label>
      <Input type='checkbox' role='switch' />
    </Field>

    <Divider />

    <Field
      position='end'
      style={{
        alignItems: 'center',
        padding: 'var(--ds-size-2) 0',
      }}
    >
      <Label>Silent mode</Label>
      <Input type='checkbox' role='switch' />
    </Field>

    <Divider />
  </div>
);

render(<RightAligned2En />)

Guidelines

Use the Switch to turn settings, functions, or notifications on or off. It provides users with a clear visual indication of state.

Text

The text for a Switch must be short and precise, often just one or two words. It should make sense when you read the label aloud and add “on/off” afterwards.

If you have several Switch components in a group, make sure the wording is consistent. Do not phrase them differently.

The text should describe what the function relates to, not whether it is on or off. If the state is written directly in the label, it can become confusing and make it harder to understand the actual position of the switch.