Time Picker
Material Design 3 time picker web component (lit-material-time-picker).
- 4.0 KB gzipped
- @lit-material/time-picker 0.0.4
- Renders on the server
Example
Time Picker
Clock-dial dialog. Tap a number, or press and drag anywhere on the dial — the value follows the pointer continuously.
12-hour
24-hour
A second, inner dial ring (13–23, 00) appears for the hour selection.
Install
npm install @lit-material/time-picker @lit-material/tokensimport "@lit-material/time-picker";Link @lit-material/tokens/css/index.css once per page for the colour, type and shape tokens. Install guide
API
<lit-material-time-picker>
Material Design 3 time picker — a clock-dial dialog, built on the native
<dialog> element like lit-material-dialog (scrim, Escape-to-close,
focus trap all come from the browser). No prior pattern in this repo to
build on — the dial is a fresh design, the most novel interaction of any
component here.
Properties
| Property | Attribute | Type | Default | Description |
|---|---|---|---|---|
open | open | boolean | false | |
value | value | string | undefined | none | The confirmed time, as a 24-hour "HH:MM" string (e.g. "14:05"). |
hourCycle | hour-cycle | TimePickerHourCycle | "12" | |
label | label | string | "Select time" |
Events
| Event | Description |
|---|---|
close | Re-dispatched from the native close event, after the dialog has closed. |
cancel | Re-dispatched from the native cancel event. Cancelable: calling preventDefault() stops the dialog from closing. |
change | Fires when a time is confirmed via "OK" and value actually changed. |
CSS parts
| Part | Description |
|---|---|
dialog | The native <dialog> element. |
container | The visible card. |
label | The small label above the time display. |
time-display | The row holding the hour/minute fields and AM/PM toggle. |
hour-field | The hour display/selector button. |
minute-field | The minute display/selector button. |
period-toggle | The AM/PM button pair. Only rendered for hourCycle="12". |
dial | The clock face. |
dial-number | Each selectable number on the dial. |
actions | The Cancel/OK row. |