CenturyLink Logo
CenturyLink
Lumen Logo
Lumen
Lumen Enterprise Portal Logo
Lumen Enterprise Portal
Lumen Rebrand24 Logo
Lumen Rebrand 24
Portal Rebrand24 Logo
Portal Rebrand 24

Time picker

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

Examples

Base

Label
<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
<chi-label for="example__disabled">Label</chi-label>
<chi-time-picker id="example__disabled" disabled></chi-time-picker>

Value option

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

Seconds

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

24-hour format

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

<chi-time></chi-time>

Active

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

Seconds

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

24-hour format

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

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-time minutes-step="20"></chi-time>
Seconds step
<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
15
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
15
value
value
Selected time in the time picker
string
undefined

Events

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

Accessibility

Keyboard Navigation

KeyFunction
TabFocus moves to the hour/minute select and opens the dropdown with hour/minute options.
Shift + TabMoves focus to the previous focusable element.
Up Arrow, Down ArrowMoves focus between the options in the dropdown. If focus is on the last/first option, moves focus to the first/last option respectively.
Space,EnterSelects the option and closes the dropdown.
EscCloses 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.

Guidance for developers
  • 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.
Guidance for designers
  • 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

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)