Mozilla's getting a new look. What do you think? https://mzl.la/brandsurvey

This article needs a technical review. How you can help.

Value selectors let the user choose from among a list of possible values.

Notes

A single value selector is used to pick a single item within a list.

A multiple value selector is used to pick multiple items within a list.

A date selector is used to pick a date for a specific field. A date selector can be customized to meet the specific needs of a given app. For example, it can be made to display only the dates after today.

The fields of the date selectors can be removed depending on the purpose of the date selection. In some cases, only a month and year may be required, such as when inputting a credit card expiration date.

A time selector is used to pick a specific time.

An integer selector is used to pick a number within a specific range.

Interaction — basic single value selector

The user taps the language value selector to change the system language.

A circular animation fills the background, emanating from the selected object while the value selector fades in from the center of the screen.

The user taps on a language within the value selector to choose the language. The value selector immediately fades out once the user selects a language.

The user can tap the Cancel button or any place outside the value selector to close dialog and return the previous view.

A single value selector should always focus and display the previous or default selected item.

Language selection has been updated and the user returned to the previous screen.

Interaction — basic multiple value selector

To edit alarm repeat preference, the user taps on the repeat value selector.

A circular animation fills the background, emanating from the selected object while the value selector fades in from the center of the screen.

The user taps on the days within the value selector to select multiple repeat days.

The user taps cancel to close the dialogue and return to the previous view without making any changes.

A multiple value selector should always focus on and display the previously selected or default selected items.

The user taps OK to complete the selection. The value selector fades out to display the previous view with the selected value(s) applied.

The repeat value selector has been updated and the user is returned to the edit alarm section.

Interaction — date selector

The user taps on the date value selector to set a calendar event date.

A circular animation fills the background, emanating from the selected object while the value selector fades in from the center of the screen.

The user drags up or down to select a date. The user can also tap on visible date values to scroll directly to the value.

The user taps cancel to close the dialogue and return to the previous view without making any changes.

A. When a date is selected, the corresponding day of the week will be displayed at the top of the selector.

B. When a user reaches the end of the month or day list, the selector will loop back to the first item of that list.

The user taps OK to complete the selection. The value selector fades out to display the previous view with the selected value applied.

The user is returned to the previous view and the date has been updated.

Interaction — time selector

The user taps on the time value selector to set a calendar event time.

A circular animation fills the background, emanating from the selected object while the value selector fades in from the center of the screen.

The user drags up or down to select a time. The user can also tap on visible time values to scroll directly to it.

The user taps cancel to close the dialogue and return to the previous view without making any changes.

A. For hour and minute the selector will loop to the first item from the end of the list. When hour loops back it will also change the selection of AM/PM.

The user taps OK to complete the selection. The value selector fades out to display the previous view with the selected value applied.

The user is returned to the previous view and the time has been updated.

Implementation guides

Document Tags and Contributors

 Contributors to this page: chrisdavidmills, kscarfone, ChrisL, chrisdavidmills-github
 Last updated by: chrisdavidmills,