# Picker.

## Übersicht

### Was macht die Komponente?

- Dient zur Eingabe eines Werts, Datums, einer Zeitangabe oder Kombination davon.

### Wann soll die Komponente eingesetzt werden?

- Immer wenn vom Benutzer ein Datums- und/oder Zeitwert verlangt wird.

### Regeln

- Die Wertangaben sind immer einzeilig.
- Optionale Eingaben werden mit dem Text «(optional)» hinter dem Label versehen. Bei kurzen Feldern kann der Text «(optional)» mit «(opt.)» abgekürzt werden.
- Mit Klick ins Eingabefeld öffnet sich der Picker. Innerhalb des Pickers dürfen maximal 3 Auswahlräder zur Verfügung stehen.

## Varianten

### Varianten

- Typ: Date-Time / Date / Time / Timerange / Value
- Darstellung: Default / Boxed
- Label: optional

#### Date-Time

![Darstellung des Pickers, Date-Time](https://digital.sbb.ch/assets/images/mobile/modal-back-light.webp "Picker, Date-Time")

![Darstellung des Pickers, Date-Time](https://digital.sbb.ch/assets/images/mobile/modal-back-dark.webp "Picker, Date-Time")

#### Date

![Darstellung des Pickers, Date](https://digital.sbb.ch/assets/images/mobile/Date-light.webp "Picker, Date")

![Darstellung des Pickers, Date](https://digital.sbb.ch/assets/images/mobile/Date-dark.webp "Picker, Date")

#### Time

![Darstellung des Pickers, Time](https://digital.sbb.ch/assets/images/mobile/Time-light.webp "Picker, Time")

![Darstellung des Pickers, Time](https://digital.sbb.ch/assets/images/mobile/Time-dark.webp "Picker, Time")

#### Timerange

![Darstellung des Pickers, Timerange](https://digital.sbb.ch/assets/images/mobile/Timerange-light.webp "Picker, Timerange")

![Darstellung des Pickers, Timerange](https://digital.sbb.ch/assets/images/mobile/Timerange-dark.webp "Picker, Timerange")

\### Value

![Darstellung des Pickers, Value](https://digital.sbb.ch/assets/images/mobile/Value-light.webp "Picker, Value")

![Darstellung des Pickers, Value](https://digital.sbb.ch/assets/images/mobile/Value-dark.webp "Picker, Value")

### Spezifikationen

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

---

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