Time
<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>
Modal
Modals are automatically used when on compact screens. You can set the time picker to always use modals
<mc-textfield label="Time modal" type="time" value="03:30">
<mc-icon slot="leading-icon">schedule</mc-icon>
<!-- add modal attribute -->
<mc-time-picker modal slot="picker"></mc-time-picker>
</mc-textfield>
Compact only
This will make it so the timepicker only shows when on compact screens
<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.
<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
<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>