timepicker

About Timepicker

Implementation

A timepicker is used to select a single time. The component is using the combobox HTML structure and 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 guidelines found under Combobox

Base

<div class="slds-form-element">
  <label class="slds-form-element__label" for="combobox-unique-id-75">Time</label>
  <div class="slds-form-element__control">

States

Focused

<div class="slds-form-element">
  <label class="slds-form-element__label" for="combobox-unique-id-78">Time</label>
  <div class="slds-form-element__control">

Open - Item Focused

<div class="slds-form-element">
  <label class="slds-form-element__label" for="combobox-unique-id-81">Time</label>
  <div class="slds-form-element__control">

Open - Time selected

<div class="slds-form-element">
  <label class="slds-form-element__label" for="combobox-unique-id-84">Time</label>
  <div class="slds-form-element__control">