Time pickers

Time pickers help users select and set a specific time
Material Design Guidelines: Time pickers
Time
schedule 
        
  <wfc-textfield label="Time" type="time">
    <wfc-icon slot="leading-icon">schedule</wfc-icon>
    <wfc-time-picker slot="picker"></wfc-time-picker>
  </wfc-textfield>
Time formatted in 24 hours
The browser controls the input formate based on locale. You can force the time picker to be 24 hour format.
schedule 
        
  <wfc-textfield label="Time" type="time">
    <wfc-icon slot="leading-icon">schedule</wfc-icon>
    <wfc-time-picker hour24 slot="picker"></wfc-time-picker>
  </wfc-textfield>
Step
The step attribute is in seconds
schedule schedule 
        
  <wfc-textfield label="10 min step" type="time" step="600">
    <wfc-icon slot="leading-icon">schedule</wfc-icon>
    <wfc-time-picker slot="picker"></wfc-time-picker>
  </wfc-textfield>
  
  <wfc-textfield label="2 hour step" type="time" step="7200">
    <wfc-icon slot="leading-icon">schedule</wfc-icon>
    <wfc-time-picker slot="picker"></wfc-time-picker>
  </wfc-textfield>
Native component
        
  <wfc-textfield label="Browser picker" type="time"></wfc-textfield>