# Picker.

## Overview

### What does the component do?

- It is used for the entry of a value, date, time or combination of them.

### When should the component be used?

- Whenever a date and/or time value is required from the user.

### Rules

- The value information is always single-line.
- Optional entries include the text ‘(optional)’ behind the label. For short fields, the text ‘(optional)’ can be abbreviated to ‘(opt.)’.
- The picker is opened by clicking on the entry field. A maximum of three selection wheels are available within the picker.

## Variants

### Variants

- Type: Date-Time / Date / Time / Timerange / Value
- Display: Default / Boxed
- Label: optional

#### Date-Time

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

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

#### Date

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

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

#### Time

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

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

#### Timerange

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

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

\### Value

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

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

### Specification

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

---

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