mozilla
Your Search Results

    Value selector

    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.

    See also

    Document Tags and Contributors

    Contributors to this page: Sheppy, chrisdavidmills, stephaniehobson
    Last updated by: stephaniehobson,