# Switch.

## Overview

### What does the component do?

- It is used for activating or deactivating individual setting options.

### When should the component be used?

- When setting options have to be activated or deactivated.

### Rules

- It can only be used for activating or deactivating a function.
- No ‘on’ and ‘off’ labels can be used.
- The setting option must be clearly named using a label on the left.

## Variants

### States

The component has the following states:

- Selected
- Unselected
- Disabled selected
- Disabled unselected
- Loading
- Error (default / retry / reloading / button)

### Variants

The component has the following variants:

- Switch
    - Selected / unselected
- Switch-Item
    - without icon / with icon
    - listed / boxed
    - without subtext / with subtext
    - without link / with link

#### Switch

![Image of the switch, default](https://digital.sbb.ch/assets/images/mobile/switch-default-light.webp)

![Image of the switch, default](https://digital.sbb.ch/assets/images/mobile/switch-default-dark.webp)

#### Switch-Item

##### Liste

![Image of the switch-item in a list](https://digital.sbb.ch/assets/images/mobile/switch-item-list-light.webp)

![Image of the switch-item in a list](https://digital.sbb.ch/assets/images/mobile/switch-item-list-dark.webp)

##### Liste, mit Icon

![Image of the switch-item in a list with icon](https://digital.sbb.ch/assets/images/mobile/switch-item-list-icon-light.webp "switch-item in a list with icon")

![Image of the switch-item in a list with icon](https://digital.sbb.ch/assets/images/mobile/switch-item-list-icon-dark.webp "switch-item in a list with icon")

##### Liste, mit Subtext

![Image of the switch-item in a list with subtext](https://digital.sbb.ch/assets/images/mobile/switch-item-list-subtext-light.webp "switch-item in a list with subtext")

![Image of the switch-item in a list with subtext](https://digital.sbb.ch/assets/images/mobile/switch-item-list-subtext-dark.webp "switch-item in a list with subtext")

##### Liste, mit Link

![Image of the switch-item in a list with link](https://digital.sbb.ch/assets/images/mobile/switch-item-list-link-light.webp "switch-item in a list with link")

![Image of the switch-item in a list with link](https://digital.sbb.ch/assets/images/mobile/switch-item-list-link-dark.webp "switch-item in a list with link")

##### Boxed

![Image of the switch-item in a box](https://digital.sbb.ch/assets/images/mobile/switch-item-boxed-light.webp "switch-item in a box")

![Image of the switch-item in a box](https://digital.sbb.ch/assets/images/mobile/switch-item-boxed-dark.webp "switch-item in a box")

##### Boxed, mit Icon

![Image of the switch-item in a box with icon](https://digital.sbb.ch/assets/images/mobile/switch-item-boxed-icon-light.webp "switch-item in a box with icon")

![Image of the switch-item in a box with icon](https://digital.sbb.ch/assets/images/mobile/switch-item-boxed-icon-dark.webp "switch-item in a box with icon")

##### Boxed, mit Subtext

![Image of the switch-item in a box with subtext](https://digital.sbb.ch/assets/images/mobile/switch-item-boxed-subtext-light.webp "switch-item in a box with subtext")

![Image of the switch-item in a box with subtext](https://digital.sbb.ch/assets/images/mobile/switch-item-boxed-subtext-dark.webp "switch-item in a box with subtext")

##### Boxed, mit Link

![Image of the switch-item in a box with link](https://digital.sbb.ch/assets/images/mobile/switch-item-boxed-link-light.webp "switch-item in a box with link")

![Image of the switch-item in a box with link](https://digital.sbb.ch/assets/images/mobile/switch-item-boxed-link-dark.webp "switch-item in a box with link")

### Specification

[Design](https://www.figma.com/design/ZBotr4yqcEKqqVEJTQfSUa/Design-System-Mobile?node-id=316-3932&t=N7M8b5Y9aIJc4LzY-1)

---

Source: https://digital.sbb.ch/en/design-system/mobile/components/switch/