# Checkbox.

## Übersicht

### Was macht die Komponente?

- Dient zur Eingabe von Ja/Nein-Werten.

### Wann soll die Komponente eingesetzt werden?

- Beim Auswählen einer oder mehrerer, zueinander unabhängigen Optionen.

### Regeln

- Eine Vorauswahl ist Pflicht (aktiv oder inaktiv, kein Tristate).
- Mehrere Checkboxen können vertikal oder horizontal angeordnet werden. Die vertikale Anordnung wird bevorzugt, dadurch kann der Benutzer die Auswahlmöglichkeiten schneller erfassen.
- Horizontal Anordnung nur bei zwei bis drei Auswahlmöglichkeiten und kurzen Bezeichnungen.
- Der Text kann mehrzeilig sein.
- Nebst der eigentlich Checkbox dient auch der gesamte Text als Click-Target.

## Varianten

### Zustände

DIe Komponente hat folgende Zustände:

- Selected
- Unselected
- Indeterminate
- Disabled Selected
- Disabled Unselected
- Disabled Indeterminate
- Loading

### Varianten

Die Komponente hat folgende Varianten:

- Checkbox
    - ohne Icon / mit Icon
- Checkbox-Item
    - listed / boxed
    - ohne Icon / mit Icon
    - ohne Subtext / mit Subtext
    - ohne Button / mit Button

#### Checkbox

##### ohne Icon

![Darstellung der Checkbox ohne Icon](https://digital.sbb.ch/assets/images/mobile/checkbox-default-light.webp "Checkbox ohne Icon")

![Darstellung der Checkbox ohne Icon](https://digital.sbb.ch/assets/images/mobile/checkbox-default-dark.webp "Checkbox ohne Icon")

##### mit Icon

![Darstellung der Checkbox mit Icon](https://digital.sbb.ch/assets/images/mobile/checkbox-icon-light.webp "Checkbox mit Icon")

![Darstellung der Checkbox mit Icon](https://digital.sbb.ch/assets/images/mobile/checkbox-icon-dark.webp "Checkbox mit Icon")

#### Checkbox-Item

##### Liste

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

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

##### Liste, mit Icons (links und rechts)

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

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

##### Liste, mit Subtext

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

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

##### Liste, mit Button

![Darstellung des Checkbox-Items in einer Liste mit Button](https://digital.sbb.ch/assets/images/mobile/checkbox-item-list-button-light.webp "Checkbox-Items in einer Liste mit Button")

![Darstellung des Checkbox-Items in einer Liste mit Button](https://digital.sbb.ch/assets/images/mobile/checkbox-item-list-button-dark.webp "Checkbox-Items in einer Liste mit Button")

##### Liste, ladend

![Darstellung des Checkbox-Items in einer Liste ladend](https://digital.sbb.ch/assets/images/mobile/checkbox-item-list-loading-light.webp "Checkbox-Items in einer Liste ladend")

![Darstellung des Checkbox-Items in einer Liste ladend](https://digital.sbb.ch/assets/images/mobile/checkbox-item-list-loading-dark.webp "Checkbox-Items in einer Liste ladend")

##### Boxed

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

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

##### Boxed, mit Icons (links und rechts)

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

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

##### Boxed, mit Subtext

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

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

##### Boxed, mit Button

![Darstellung des Checkbox-Items in einer Box mit Button](https://digital.sbb.ch/assets/images/mobile/checkbox-item-boxed-button-light.webp "Checkbox-Items in einer Box mit Button")

![Darstellung des Checkbox-Items in einer Box mit Button](https://digital.sbb.ch/assets/images/mobile/checkbox-item-boxed-button-dark.webp "Checkbox-Items in einer Box mit Button")

##### Boxed, ladend

![Darstellung des Checkbox-Items in einer Box ladend](https://digital.sbb.ch/assets/images/mobile/checkbox-item-boxed-loading-light.webp "Checkbox-Items in einer Box ladend")

![Darstellung des Checkbox-Items in einer Box ladend](https://digital.sbb.ch/assets/images/mobile/checkbox-item-boxed-loading-dark.webp "Checkbox-Items in einer Box ladend")

### Spezifikationen

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

---

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