Time picker
Examples
Base
<chi-label for="example__base">Label</chi-label>
<chi-time-picker id="example__base"></chi-time-picker>
Disabled
Use the disabled
boolean attribute to prevent users from interacting with an input.
Disabled inputs are not submitted with the form and can not receive any browsing events such as mouse clicks or focus.
Note: The required attribute can not be used on inputs with a disabled attribute specified.
<chi-label for="example__disabled">Label</chi-label>
<chi-time-picker id="example__disabled" disabled></chi-time-picker>
Value option
<chi-label for="example__value-option">Label</chi-label>
<chi-time-picker id="example__value-option" value="09:00"></chi-time-picker>
Seconds
<chi-label for="example__seconds">Label</chi-label>
<chi-time-picker id="example__seconds" display-seconds></chi-time-picker>
24-hour format
<chi-label for="example__24hour-format">Label</chi-label>
<chi-time-picker id="example__24hour-format" format="24hr"></chi-time-picker>
Step
Minutes and seconds can be shown in steps of 1, 5, 10, 15, 20, or 30 minutes or seconds.
Use the property minutes-step
to define the step for the minutes (defaults to 15 minutes)
and the property seconds-step
to define the step for the minutes (defaults to 10 seconds).
Minutes step
<chi-label for="example__minutes-step">Label</chi-label>
<chi-time-picker id="example__minutes-step" minutes-step="20"></chi-time-picker>
Seconds step
<chi-label for="example__seconds-step">Label</chi-label>
<chi-time-picker id="example__seconds-step" seconds-step="30" display-seconds></chi-time-picker>
Time
An example of a time picker not attached to any element.
Base
Active
Seconds
24-hour format
Step
Minutes and seconds can be shown in steps of 1, 5, 10, 15, 20, or 30 minutes or seconds.
Use the property minutes-step
to define the step for the minutes (defaults to 15 minutes)
and the property seconds-step
to define the step for the minutes (defaults to 10 seconds).
Minutes step
Seconds step
chi-time-picker
Properties
Methods
chi-time
Properties
Events
Accessibility
Keyboard Navigation
Key | Function |
---|---|
Tab | Focus moves to the hour/minute select and opens the dropdown with hour/minute options. |
Shift + Tab | Moves focus to the previous focusable element. |
Up Arrow , Down Arrow | Moves focus between the options in the dropdown. If focus is on the last/first option, moves focus to the first/last option respectively. |
Space ,Enter | Selects the option and closes the dropdown. |
Esc | Closes the dropdown and returns focus to the hour/minute select trigger. |
For comprehensive details on keyboard support, refer to our Keyboard Control Guide.
Visit WebAIM for keyboard techniques.
Resources
- Mozilla Resources for Developers: Information about the HTML
input-type=time
. - MagentaA11y: How to test a time picker dialog.
Other recommendations
Explore additional accessibility tips in the general Accessibility Guide.
WCAG 2.2 Guidelines
- Non-text Content: All non-text content that is presented to the user has a text alternative that serves the equivalent purpose. (Level A)
- Info and Relationships: Information, structure, and relationships conveyed through presentation can be programmatically determined or are available in text. (Level A)
- Headings and Labels: Headings and labels describe topic or purpose. (Level AA)
- Labels or Instructions: Labels or instructions are provided when content requires user input. (Level A)
- Name, Role, Value: For all user interface components (including but not limited to: form elements, links and components generated by scripts), the name and role can be programmatically determined; states, properties, and values that can be set by the user can be programmatically set; and notification of changes to these items is available to user agents, including assistive technologies. (Level A)