Timepicker

Timepicker

A timepicker is an autocomplete text input to capture a time.

BaseRequires ui:scrollerWrapper

Preview

No content has been added for this component.

No content has been added for this component.

About Base

A timepicker is used to select a single time. The component is using the combobox HTML structure.


About Timepicker

Implementation Notes and Requirements

The timepicker has the following markup requirements:

Desktop

  • Add .slds-is-open to the element with .slds-dropdown-trigger to invoke the dropdown that contains the list of time options.
  • The .slds-has-focus modifier class is required on the .slds-listbox__option element that has focus.
  • The .slds-is-selected modifier class is required on the .slds-listbox__option element that has been selected.

Mobile

  • When on mobile, we want to leverage the native timepicker by changing the input type from text to time
  • When switching input type="text" to input type="time" for mobile, we need to remove the ARIA attributes. The native rendering doesn't require these.
    • On the element with the class slds-combobox, please remove role="combobox", aria-expanded, and aria-haspopup.
    • On the input that we just added type="time" too, please remove aria-controls, aria-autocomplete, and role="textbox".

Accessibility

Please follow the implementation guildelines found under Combobox


Overview of CSS Classes

Selector.slds-timepicker
Summary

Initializes a timepicker

Restrictdiv
VariantTrue