Welcome Getting started Layout styles github-circle-black-transparent Source
Components
Badges
App bars
Bottom app bars Top app bars
Buttons
Common buttons FAB Icon buttons Segmented buttons Cards Carousel Checkboxes Chips Date pickers Dialogs Forms Icons Lists Menus Navigation Progress indicators Pull to refresh Radios Search Selects
Sheets
Bottom sheets Side sheets Sliders Snackbars Switches Tabs Text fields Time pickers Tooltips Utilities home apps Buttons palette Two
Materially
github-circle-black-transparent

Time pickers

Time pickers help users select and set a specific time
Material Design Guidelines: Time pickers

Time

schedule schedule schedule 
<mc-textfield label=Time type=time value=03:30>
  <mc-icon slot=leading-icon>schedule</mc-icon>
  <mc-time-picker slot=picker></mc-time-picker>
</mc-textfield>

<mc-textfield label="Time modal" type=time value=03:30>
  <mc-icon slot=leading-icon>schedule</mc-icon>
  <mc-time-picker modal slot=picker></mc-time-picker>
</mc-textfield>

<mc-textfield label="Time compact only" type=time value=03:30>
  <mc-icon slot=leading-icon>schedule</mc-icon>
  <mc-time-picker compact-only slot=picker></mc-time-picker>
</mc-textfield>

Compact only

This will make it so the timepicker only shows when on compact screens
schedule 
<mc-textfield label=Time type=time value=03:30>
  <mc-icon slot=leading-icon>schedule</mc-icon>

  
  <mc-time-picker compact-only slot=picker></mc-time-picker>
</mc-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 schedule 
<mc-textfield label=Time type=time>
  <mc-icon slot=leading-icon>schedule</mc-icon>
  <mc-time-picker hour24 slot=picker></mc-time-picker>
</mc-textfield>

<mc-textfield label="Time modal" type=time>
  <mc-icon slot=leading-icon>schedule</mc-icon>
  <mc-time-picker hour24 modal slot=picker></mc-time-picker>
</mc-textfield>

Step

The step attribute is in seconds
schedule schedule schedule schedule 
<mc-textfield label="10 min step" step=600 type=time>
  <mc-icon slot=leading-icon>schedule</mc-icon>
  <mc-time-picker slot=picker></mc-time-picker>
</mc-textfield>

<mc-textfield label="2 hour step" step=7200 type=time>
  <mc-icon slot=leading-icon>schedule</mc-icon>
  <mc-time-picker slot=picker></mc-time-picker>
</mc-textfield>

<mc-textfield label="10 min step modal" step=600 type=time>
  <mc-icon slot=leading-icon>schedule</mc-icon>
  <mc-time-picker modal slot=picker></mc-time-picker>
</mc-textfield>

<mc-textfield label="2 hour step modal" step=7200 type=time>
  <mc-icon slot=leading-icon>schedule</mc-icon>
  <mc-time-picker modal slot=picker></mc-time-picker>
</mc-textfield>

Native component

<mc-textfield label="Browser picker" type=time></mc-textfield>
menu home apps Get started