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-4">Time</label>
  <div class="slds-form-element__control">
    <div class="slds-combobox_container">

States#

Focused#

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

Open - Item Focused#

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

Open - Time selected#

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