Skip to content
Telescope
Components

Switch

A control used to switch between two states - often on or off.

Features

  • Can be used with a label or standalone
  • Label text can be on the left or right side.
  • Supports adding a description below the label.
  • Supports keyboard navigation

When to use

We commonly use Switch components for activating or deactivating settings. When toggled, the switch should immediately apply and visibly indicate the change.

Examples

Labelled

The component comes with built-in support for a label. The label is used to describe the switch and is usually a short sentence or a single word. Use succinct phrases with verbs or nouns. Don't use phrases that describe the switch's state.

Show code
<Switch checked>Use Fetch</Switch>

Label position

If the switch is aligned to the right, the label should be aligned to the left. If the switch is aligned to the left, the label should be aligned to the right.

Show code
<Inline alignX="right">
    <Switch checked labelPosition="left">
        Use Fetch
    </Switch>
</Inline>

Standalone

You may need more flexibility for layout purposes or similar. In these cases, it's important to use an aria-labelledby attribute to ensure that your switch remains accessible for all users.

Information:

Don't use the standalone switch without visible text that labels the element.

Show code
<Inline justifyContent="space-between">
    <Text id="label">Use Fetch</Text>
    <Switch checked aria-labelledby="label" />
</Inline>

Disabled

A disabled switch indicates that while an option is present, it's not currently accessible under the given conditions. This helps to keep the layout consistent and signals that the action could be enabled in the future.

Show code
<Switch checked disabled>
    Use Fetch
</Switch>

With description

Optionally, you can provide a description of the setting that is being turned on or off.

Show code
<Switch checked description="Share useful content to inspire your collegues at Pleo">
    Publish to Inspiration Hub
</Switch>

Best practices

Do
Use succinct phrases with verbs or nouns.
Don't
Use phrases that describe the switch's state.
Do
Have a label associated with the switch.
Don't
Use the switch without a visible label.
Do
Use for actions that have immediate effect visible to the user.
Don't
Use for indirect effects; opt for checkboxes instead.
List
Table
Do
Use for binary actions.
Don't
Use for opposing options.

Accessibility

Adheres to the WAI-ARIA practices for switches. See Radix documentation for details.

Related components

  • Checkbox: A form element that enables users to make a binary choice (checked/unchecked).
  • Radio group: A form element that enables users to select a single value from a list of options.
  • Segmented control: A hybrid somewhere between a button group, radio buttons, and tabs; segmented controls are used to switch between different options or views.
Didn't find what you were looking for?
Let us know in #team-design-systems or make a request.
Edit this page