Skip to main content

TimePicker (Material Style)

The Material-style TimePicker uses a clock face for intuitive time selection, following Material Design 3 guidelines.

Live Example​

Dark Theme Clock​

Business Hours Constraint​

Clock Face Behavior​

The Material clock face operates in two phases:

  1. Hour Selection: Tap or drag to select the hour on the outer ring (1-12) or inner ring (13-24 in 24h mode)
  2. Minute Selection: After hour selection, the clock transitions to minute mode with 5-minute markers

The clock hand animates smoothly as you drag, and snaps to the nearest valid position on release.

Next Steps​