# Switch.

## Übersicht

### Was macht die Komponente?

- Dient zum Ein- oder Ausschalten von einzelnen Einstellungsoptionen.

### Wann soll die Komponente eingesetzt werden?

- Wenn Einstellungsoptionen ein- oder ausgeschaltet werden müssen.

### Regeln

- Darf nur zum Ein- oder Ausschalten einer Funktion verwendet werden.
- Es sind keine Labels «ein» und «aus» zu nutzen.
- Die Einstellungsoption muss klar benannt werden mittels einem Label links.

## Varianten

### Zustände

DIe Komponente hat folgende Zustände:

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

### Varianten

Die Komponente hat folgende Varianten:

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

#### Switch

![Darstellung des Switch](https://digital.sbb.ch/assets/images/mobile/switch-default-light.webp "Switch")

![Darstellung des Switch](https://digital.sbb.ch/assets/images/mobile/switch-default-dark.webp "Switch")

#### Switch-Item

##### Liste

![Darstellung des Switch-Item in einer Liste](https://digital.sbb.ch/assets/images/mobile/switch-item-list-light.webp "Switch-Item in einer Liste")

![Darstellung des Switch-Item in einer Liste](https://digital.sbb.ch/assets/images/mobile/switch-item-list-dark.webp "Switch-Item in einer Liste")

##### Liste, mit Icon

![Darstellung des Switch-Item in einer Liste mit Icon](https://digital.sbb.ch/assets/images/mobile/switch-item-list-icon-light.webp "Switch-Item in einer Liste mit Icon")

![Darstellung des Switch-Item in einer Liste mit Icon](https://digital.sbb.ch/assets/images/mobile/switch-item-list-icon-dark.webp "Switch-Item in einer Liste mit Icon")

##### Liste, mit Subtext

![Darstellung des Switch-Item in einer Liste mit Subtext](https://digital.sbb.ch/assets/images/mobile/switch-item-list-subtext-light.webp "Switch-Item in einer Liste mit Subtext")

![Darstellung des Switch-Item in einer Liste mit Subtext](https://digital.sbb.ch/assets/images/mobile/switch-item-list-subtext-dark.webp "Switch-Item in einer Liste mit Subtext")

##### Liste, mit Link

![Darstellung des Switch-Item in einer Liste mit Link](https://digital.sbb.ch/assets/images/mobile/switch-item-list-link-light.webp "Switch-Item in einer Liste mit Link")

![Darstellung des Switch-Item in einer Liste mit Link](https://digital.sbb.ch/assets/images/mobile/switch-item-list-link-dark.webp "Switch-Item in einer Liste mit Link")

##### Boxed

![Darstellung des Switch-Item in einer Box](https://digital.sbb.ch/assets/images/mobile/switch-item-boxed-light.webp "Darstellung des Switch")

![Darstellung des Switch-Item in einer Box](https://digital.sbb.ch/assets/images/mobile/switch-item-boxed-dark.webp "Darstellung des Switch")

##### Boxed, mit Icon

![Darstellung des Switch-Item in einer Box mit Icon](https://digital.sbb.ch/assets/images/mobile/switch-item-boxed-icon-light.webp "Switch-Item in einer Box mit Icon")

![Darstellung des Switch-Item in einer Box mit Icon](https://digital.sbb.ch/assets/images/mobile/switch-item-boxed-icon-dark.webp "Switch-Item in einer Box mit Icon")

##### Boxed, mit Subtext

![Darstellung des Switch-Item in einer Box mit Subtext](https://digital.sbb.ch/assets/images/mobile/switch-item-boxed-subtext-light.webp "Switch-Item in einer Box mit Subtext")

![Darstellung des Switch-Item in einer Box mit Subtext](https://digital.sbb.ch/assets/images/mobile/switch-item-boxed-subtext-dark.webp "Switch-Item in einer Box mit Subtext")

##### Boxed, mit Link

![Darstellung des Switch-Item in einer Box mit Link](https://digital.sbb.ch/assets/images/mobile/switch-item-boxed-link-light.webp "Switch-Item in einer Box mit Link")

![Darstellung des Switch-Item in einer Box mit Link](https://digital.sbb.ch/assets/images/mobile/switch-item-boxed-link-dark.webp "Switch-Item in einer Box mit Link")

### Spezifikationen

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

---

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