Time Picker is a time-based component used for choosing a time of the day.
Overview
Time Picker can be used to pick a time of day that will autofill an input. Time Picker is designed to work within a dropdown or statically within the interface.
Usage
- Choosing a time of day
Sample
Accessibility
Keyboard navigation
| Key | Function |
|---|---|
Tab | Moves focus between the component's elements. If the currently focused element is the last element, focus will cycle to the first element. |
Tab and Shift | Moves focus between the component's elements. If the currently focused element is the first element, focus will cycle to the last element. |
Arrow left | Moves focus between the component's elements. If the currently focused element is the last element, focus will remain on the last element. |
Arrow right | Moves focus between the component's elements. If the currently focused element is the first element, focus will remain on the first element. |
Arrow top | Increases the value of the focused element. |
Arrow bottom | Decreases the value of the focused element. |
Esc | When contained in a parent component, such as calcite-input-time-picker, closes the component. |