Value selectors let the user choose one of a number of possible values, and are typically used from a form interface. For example, value selectors could be used to choose the month or day for a calendar event. These are presented automatically for the values of the <input> element's type attribute.
Characteristics
- Value selectors may have an optional title.
- The following types of value selectors are provided:
- Date
- Time
- SIngle-select list
- Multiple-select list
Visuals
Below are examples of the various types of selectors possible. See Interaction below for additional details on how each of these selectors functions.
Single value selector
|
Multiple value selector
|
Nested value selector
|
Time selector
|
Date selector
|
Rolling date selector
|
Selector with subheaders
|
Full screen input prompt
|
Variations
This section provides additional details about the functioning of the different types of value selectors.
Single select
Only a single item may be selected. As soon as the user taps an item, the value selector closes and returns the selected value to the parent field. The current selection (as established before the value selector was opened) is indicated with an indicator; in the example above, a checkmark. |
Single select (radio style)
This variant of the single-select value selector requires that the user manually tap the "Select" button in order to close the value selector. In the example here, the user is able to sample different ringtones before making their final selection. |
Multiple select
In a multiple-select value selector, the user can choose multiple items (or, in fact, no items at all). Each item is toggled on and off by tapping on it; the user finalizes their selections by tapping the "Select" button. Doing so returns the chosen values to the parent field. |
Select date
The user can browse the months in a calendar view to select a date. The current date is also highlighted, for reference. The user must manually tap the "Select" button to confirm their choice and close the value selector. |
Select time
The user can select a time. The selected time is indicated by the highlighted bar across the center. The user swipes up and down on the hour, minute, and AM/PM to select the time, and must manually tap the "Select" button to confirm their choice and return the selected time to the parent field. |
Select number
A number selector lets the user choose a number from a preset range. Tapping a number immediately closes the value selector, returning the chosen value to the parent field. |
Interaction
Below is an example flow of interaction as a user sets the start time for an event, using both date and time value selectors.
Scrolling
If the number of items in the list of options exceeds the number that will fit in the vertical space available on the screen, the list becomes scrollable. Scrolling is performed by pressing on the screen and moving up or down before releasing the screen, as shown in the diagram below.
