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> <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> <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 hour24 modal slot=picker></mc-time-picker> </mc-textfield>
Step
The step attribute is in seconds
<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>