Time picker

Time picker allows users to enter a time through text input or choose a time from a picker.

Examples

Base

Label

Web Component
HTML Blueprint

<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.

Label

Web Component
HTML Blueprint

<chi-label for="example__disabled">Label</chi-label>
<chi-time-picker id="example__disabled" disabled></chi-time-picker>

Value option

Label

Web Component
HTML Blueprint

<chi-label for="example__value-option">Label</chi-label>
<chi-time-picker id="example__value-option" value="09:00"></chi-time-picker>

Seconds

Label

Web Component
HTML Blueprint

<chi-label for="example__seconds">Label</chi-label>
<chi-time-picker id="example__seconds" display-seconds></chi-time-picker>

24-hour format

Label

Web Component
HTML Blueprint

<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

Label

Web Component
HTML Blueprint

<chi-label for="example__minutes-step">Label</chi-label>
<chi-time-picker id="example__minutes-step" minutes-step="20"></chi-time-picker>

Seconds step

Label

Web Component
HTML Blueprint

<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.

<chi-time></chi-time>

Active

Web Component
HTML Blueprint

<chi-time value="14:00"></chi-time>

Seconds

Web Component
HTML Blueprint

<chi-time display-seconds></chi-time>

24-hour format

Web Component
HTML Blueprint

<chi-time format="24hr"></chi-time>

Step

Minutes step

Web Component
HTML Blueprint

<chi-time minutes-step="20"></chi-time>

Seconds step

Web Component
HTML Blueprint

<chi-time seconds-step="30" display-seconds></chi-time>

chi-time-picker

Properties

Property	Attribute	Description	Type	Default
`active`	`active`	Indicates whether the time picker popover is open or closed	`boolean`	`false`
`disabled`	`disabled`	To disable chi-time-picker.	`boolean`	`false`
`displaySeconds`	`display-seconds`	Displaying seconds column	`boolean`	`false`
`format`	`format`	To define format of Time Picker.	`"12hr" \| "24hr"`	`'12hr'`
`minutesStep`	`minutes-step`	Renders minutes in stepped format. Defaults to 15 min steps if no value is provided (see examples in docs).	`1 \| 10 \| 15 \| 20 \| 30 \| 5`	`15`
`secondsStep`	`seconds-step`	Renders seconds in stepped format. Defaults to 10 seconds if no value is provided (see examples in docs).	`1 \| 10 \| 15 \| 20 \| 30 \| 5`	`10`
`value`	`value`	Selected time of Time Picker	`string`	undefined

Methods

Method	Description	Returns	Parameters
`getTime() => Promise<string>`	Gets time	Type: Promise<string>	-
`setTime(time: string) => Promise<void>`	Sets time	Type: Promise<void>	time:string

chi-time

Properties

Property	Attribute	Description	Type	Default
`displaySeconds`	`display-seconds`	Displaying seconds column	`boolean`	`false`
`format`	`format`	To render Time Picker in 24 hours format	`"12hr" \| "24hr"`	`'12hr'`
`minutesStep`	`minutes-step`	Renders minutes in stepped format. Defaults to 15 min steps if no value is provided (see examples in docs).	`1 \| 10 \| 15 \| 20 \| 30 \| 5`	`15`
`secondsStep`	`seconds-step`	Renders seconds in stepped format. Defaults to 10 seconds if no value is provided (see examples in docs).	`1 \| 10 \| 15 \| 20 \| 30 \| 5`	`10`
`value`	`value`	Selected time in the time picker	`string`	undefined

Events

Event	Description	Type
`chiTimeChange`	Time change value event	`CustomEvent<any>`

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.

Keyboard Navigation: Support navigation through hours, minutes, and optionally seconds using arrow keys, and allow selection with the "Enter" key.
Use label Elements: Provide descriptive labels for each select component involved in time picking. Ensure the for attribute of the label matches the id of the associated input or select box to support screen readers.
Use appropriate ARIA roles and attributes to enhance accessibility. For example, role="listbox" for the select element and role="option" for each option within hour, minute, and second dropdowns.
Error Handling and Feedback: Provide clear and immediate feedback for actions such as selection errors. Use ARIA live regions to announce updates or errors dynamically.
Test compatibility with various screen readers (like JAWS, NVDA, or VoiceOver) to ensure the time picker component is announced correctly. Options should be clearly read out when navigated.
Implement visible focus styles to help keyboard users determine which element has focus.

Ensure all interactive elements in the time picker, like hour and minute selections and navigation buttons, meet the minimum target size of 44x44 pixels, as recommended by WCAG 2.5.5.
Design elements with adequate spacing to prevent accidental activations.
Design the time picker with high contrast between text and background colors, ensuring a minimum contrast ratio of 4.5:1 for text.
Employ distinct visual styles for error states using icons, text styles, and colors to clearly denote and explain errors like invalid dates or format issues.
Implement noticeable focus indicators on interactive elements, using enhanced borders, outlines, or shadows to clearly mark the active element during keyboard navigation.
Use spacing, typography, and visual cues effectively.
Maintain consistency in the design of the time picker to provide a cohesive user experience.

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)