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>

  <!-- add compact-only attribute -->
  <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 modal hour24 slot="picker"></mc-time-picker>
</mc-textfield>
            

Step

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

<mc-textfield label="2 hour step" type="time" step="7200">
  <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" type="time" step="600">
  <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" type="time" step="7200">
  <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