Updated: August 27, 2024

Pickers

FUIDatePickerFormCell, FUIDurationPickerFormCell, FUIValuePickerFormCell

Intro

A picker is used for selecting a single value by scrolling through a short list of predictable values. It’s commonly used for selecting dates, time, or the combination of both.

Time picker
Time picker

Anatomy

A. Table Cell

The table cell displays a label and a selected value. The selected value is in tint color when the picker is active.

B. Scrollable List

The scrollable list contains values in a logical order. It can be accessed by tapping on the table cell.

Picker anatomy
Picker anatomy

Adaptive Design

Pickers are supported in both compact and regular widths.

In regular width, the scrollable list can be shown below the table cell in a form sheet modal.

Date picker in compact and regular size
Date picker in compact and regular size

Variations

Date Picker

Use a date picker to select a specific time, date or the combination of both.

Date 

Displays months, days in the month, and years.

Time 

Displays hours, minutes, and an AM/PM designation.

Date and Time

Displays dates, hours, minutes, and an AM/PM designation.

For more information about displaying time and dates, see Time and Date Formats.

Date picker
Date picker

Value Picker

A value picker can be used for selecting any values of text or numbers. For numbers, always include appropriate granularity of the values.

Value picker
Value picker

Duration Picker

Use a duration picker to select a length of time including hours and minutes. The maximum of the duration picker is 23 hours and 59 minutes.

Duration picker
Duration picker

Resources