# Radio-Button.

## Übersicht

### Was macht die Komponente?

- Dient zur Auswahl genau einer Option aus mehreren.

### Wann soll die Komponente eingesetzt werden?

- Bei zwei und mehr Auswahlmöglichkeiten, bei der sich die Optionen gegenseitig ausschliessen.

### Regeln

- Es müssen mindestens zwei Optionen zur Auswahl stehen.
- Eine Vorauswahl ist Pflicht.
- Radio Buttons können vertikal oder horizontal angeordnet werden. Die vertikale Anordnung wird bevorzugt, dadurch können die Benutzenden die Auswahlmöglichkeiten schneller erfassen.
- Horizontale Anordnung nur bei zwei bis drei Auswahlmöglichkeiten und kurzen Bezeichnungen.
- Der Text kann mehrzeilig sein.
- Nebst dem eigentlichen Radiobutton dient auch der gesamte Text als Click-Target.

## Varianten

### Zustände

DIe Komponente hat folgende Zustände:

- Checked
- Unchecked
- Disabled checked
- Disabled unchecked
- Loading

### Varianten

Die Komponente hat folgende Varianten:

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

#### Radiobutton

##### ohne Icon

![Darstellung des Radiobuttons ohne Icon](https://digital.sbb.ch/assets/images/mobile/radiobutton-default-light.webp "Radiobutton ohne Icon")

![Darstellung des Radiobuttons ohne Icon](https://digital.sbb.ch/assets/images/mobile/radiobutton-default-dark.webp "Radiobutton ohne Icon")

##### mit Icon

![Darstellung des Radiobuttons mit Icon](https://digital.sbb.ch/assets/images/mobile/radiobutton-icon-light.webp "Radiobutton mit Icon")

![Darstellung des Radiobuttons mit Icon](https://digital.sbb.ch/assets/images/mobile/radiobutton-icon-dark.webp "Radiobutton mit Icon")

#### Radiobutton-Item

##### Liste

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

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

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

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

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

##### Liste, mit Subtext

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

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

##### Liste, mit Button

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

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

##### Liste, ladend

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

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

##### Boxed

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

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

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

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

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

##### Boxed, mit Subtext

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

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

##### Boxed, mit Button

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

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

##### Boxed, ladend

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

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

### Spezifikationen

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

---

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