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>