Live demo — this example is server-driven; run the showcase locally for the interactive version.

Time picker

Composition pattern — text input + clock-icon toggle that opens a scrollable list of 30-minute slots. Alpine binds the chosen slot back to the input.

Java Builder
Qute template

Examples

Basic 24 hour

HH:MM slots in 30-minute steps.

Basic 12 hour

12-hour clock with AM/PM labels.

Custom delimiter

A period instead of the colon.

Minimum/maximum times

Only 09:00–17:00 offered; typed values outside the window error.

Pick a time between 09:00 and 17:00.

With seconds

12-hour slots including seconds.

Basic 24 hours with seconds

HH:MM:SS.

Documentation

Time picker pattern

Composition — no runtime template. The example uses pure HTML + Alpine for the slot grid and value binding.

Usage

24-hour vs. 12-hour. The example renders 24-hour slots. For 12-hour AM/PM add a separate Alpine state for the meridiem and emit it next to the input.

Edit time-picker example on GitHub