Skip to content
Telescope

SwitchNew: New

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.

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.

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.

Use Fetch

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.

With description

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

Share useful content to inspire your collegues at Pleo

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: Checkboxes are most commonly used when there are multiple items to select in a list. Users can select zero, one, or any number of items.
  • Radio group: A form element that allow users to select an single option from a list of at least two 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.