Intro

Picker form cells are used for making date and time-based selections.

Time picker form cells in compact (left) and expanded layouts (right)

Usage

Use an asterisk (*) next to the list picker form cell label to indicate that the input is required. For broader or less experienced audiences, include a note such as “Fields marked with an asterisk are required” at the top or bottom of the page, and repeat this consistently across the app.

Anatomy

Single Value Picker Form Cell

Single value picker form cells are used for selecting a single value. They include the date, date range, time, and duration pickers.

A. Label

The label describes the topic or name of the picker. It may have an asterisk next to it to indicate that users need to select a value.

For broader or less experienced audiences, include a note such as “Fields marked with an asterisk are required” at the top or bottom of the page, and repeat this consistently across the app.

B. Value

The value shows the selected date, date range, time, or duration.

C. Icon

Unique icons are shown for the different picker form cell types. These icons help users understand what value can be picked.

D. Helper Text

The helper text provides additional information about the selection, such as hints, requirements, etc.

Single value picker form cell anatomy

Date and Time Picker Form Cell

Date and time picker form cells are used for selecting a date and time value.

A. Label

The label describes the topic or name of the picker. It may have an asterisk next to it to indicate that users need to select a value.

For broader or less experienced audiences, include a note such as “Fields marked with an asterisk are required” at the top or bottom of the page, and repeat this consistently across the app.

B. Date Value

The date value shows the selected date.

C. Time Value

The time value shows the selected time.

D. Helper Text

The helper text provides additional information about the selection, such as hints, requirements, etc.

Date and time picker form cell anatomy

Behavior and Interaction

Single Value Form Cell Selection

To select a value using a single value picker form cell, users may tap the form cell to open the associated dialog and update the value.

Updating the date of a date picker form cell

Date and Time Picker Form Cell Selection

To select a date using a date and time picker form cell, users may tap the selected date to open a date picker dialog and update the value. To select a time value, users may tap the selected time to open a time picker dialog and update the value.

Updating the date and time of a date and time picker form cell

Validation Message

A validation message warns users when a picker form cell must contain a selection.
The validation message should be concise; we recommend no more than one line of text.