Time Selector Code Pending
Time Selector allows users to specify a time, timeframe or range of time (beginning and end).
Standard Time Select
There are several controls for capturing a single time. A select input is the most common:
When to Use
- This variation works in many instances, including when there are even increments, timeframes (morning, afternoon, etc.) or uneven increments available.
When Not to Use
- Do not use when the user is likely to want to specify an exact time, such as 11:48am. A text input or number spinner would be preferred.
Variations
- Single Time Select (shown above)
- Time Range Slider
- Time Range Select Inputs
- Time Text Input Field
Variations
Time Range Slider
When to Use
- To select a beginning and end time.
- To indicate a minimum and maximum time value.
- Recommended for touch displays.
When Not to Use
- Do not use for fine/exact time selection.
Time Range Select Input
The Range Select provides similar functionality as the Range Slider, but it is better suited to applications in which the user is more likely to be using a keyboard.
Time Text Input
When to Use
- When a user can specify an exact time (for example, 10:42am) or select from a list of time increments.
When Not to Use
- Not recommended for touch applications.
Time Text Input Combo Box
The Text Input Combo Box is similar to the text input, but it also displays a list of options when the user clicks into the field.
Time Spinner
Up/down arrows cannot be disabled and they should always loop.
When to use
- Use when all increments of time are alway available.
- Use when increments are evenly spaced.
- Recommended for touch displays.
Behaviors
- Up/down arrows should loop
- Up/down arrows should not be disabled
Limited Time Selection (Time Selection Buttons)
This variation is recommended when there is a limited number of available options. It is well suited to displaying multiple categories of data, each with their own time selection (for example, performances with available showing times), or in instances when the availability of time options needs added prominence.
When to use
- When there is a limited set of available times
- When options are in uneven increments.
- Recommended for touch displays.
Behaviors
It is recommended that the buttons use the carousel functionality (shown in our example). If there is a very limited set of time options, the buttons may wrap to a second line instead.