Interactive time selection wheel. Click the inner disc to select hours (0-11), click the outer ring to select minutes (0-59).
Keyboard shortcuts: Tab to switch between hour/minute | Arrow keys adjust value | H = hours | M = minutes
Complete demonstration of basic usage, value control, keyboard navigation, and disabled state.
The size attribute controls the widget dimensions. Default is 240px.
Configure hour and minute overlays independently using none | ticks | dots | labels.
Use CSS custom properties to completely customize the appearance without shadow DOM piercing.
--td-size - Widget size (default: 240px)--td-hour-disc-fill - Inner disc background (default: white)--td-minute-disc-fill - Outer disc background (default: white)--td-hour-disc-shadow - Inner disc shadow (default: drop-shadow(...))--td-minute-disc-shadow - Outer disc shadow (default: drop-shadow(...))--td-hour-sector-fill - Hour sector color (default: rgba(0, 255, 0, 0.5))--td-minute-sector-fill - Minute sector color (default: rgba(128, 255, 128, 0.5))--td-tick-color - Tick marks color (default: #8a8a8a)--td-tick-width - Tick marks width (default: 1)--td-dot-color - Dot markers color (default: #8a8a8a)--td-label-color - Label text color (default: currentColor)--td-label-font-size - Label font size (default: 10px)--td-label-font-family - Label font family (default: inherit)--td-label-font-weight - Label font weight (default: inherit)--td-focus-color - Focus outline color (default: #000000)--td-focus-width - Focus outline width (default: 1)--td-disabled-opacity - Disabled state opacity (default: 0.6)