• Use bottom sheets to show deep-linked content that supplements the screen’s primary UI region.
• Use bottom sheets when representing actions in a list as opposed to menus or simple dialog.
• Use bottom sheets when you need to allow for a wide variety of content and layouts.
• Use bottom sheets when easy access is needed.

• Don’t use bottom sheets for complex information.
• Don’t use bottom sheets to notify a user to take action.

A. Label

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

B. Value

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

C. Icon

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

D. Helper Text

The helper text provides additional information about the form cell.

A. Label

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

B. Date Value

The date value shows the selected date. It can be tapped to open the date picker dialog.

C. Time Value

The time value shows the selected time. It can be tapped to open the time picker dialog.

D. Helper Text

The helper text provides additional information about the form cell.

Date Picker Form Cell

When this cell is used to define a specific date, users can tap on the cell to trigger the date picker dialog found in the date/time picker. Users then make their selection in the dialog. When they close the dialog, the value they selected is displayed in the form cell.

Date Range Picker Form Cell

When this cell is used to define a specific date range, users can tap on the cell to trigger the full-page range picker dialog found in the date/time picker. Users then make their selection in the dialog. When they close the dialog, the value they selected is displayed in the form cell.

Time Picker Form Cell

When this cell is used to define a specific time, users can tap on the cell to trigger the time picker dialog found in the date/time picker. Users then make their selection in the dialog. When they close the dialog, the value they selected is displayed in the form cell.

Date and Time Picker Form Cell

When this cell is used to define a specific date and time, users can tap on either the date value or the time value to open the associated dialogs found in the date/time picker. Users then make their selection in the dialog. When they close the dialog, the value they selected is displayed in the form cell.

Duration Picker Form Cell

When this cell is used to set a time duration, users can tap on the cell to trigger the time duration picker. Users then make their selection in the dialog. When users close the dialog, the value they selected will be shown in the cell.