Time Picker — Sigta UI

Basic (30-minute steps)

Start time

Source

<div class="max-w-xs">
        <sigta:time-picker label="Start time" name="start" placeholder="Pick a time" />
    </div>

Pre-filled value

Standup

Source

<div class="max-w-xs">
        <sigta:time-picker label="Standup" name="standup" value="09:30" />
    </div>

12-hour labels (model stays 24h)

Lunch

Source

<div class="max-w-xs">
        <sigta:time-picker label="Lunch" name="lunch" value="13:30" format="12" />
    </div>

15-minute steps, bounded 09:00–17:00

Meeting

Source

<div class="max-w-xs">
        <sigta:time-picker label="Meeting" name="meeting" step="15" min="09:00" max="17:00" value="10:15" />
    </div>

With description

Reminder

Type a time (e.g. 14:45) or choose from the list.

Source

<div class="max-w-xs">
        <sigta:time-picker label="Reminder" name="reminder"
            description="Type a time (e.g. 14:45) or choose from the list." />
    </div>

Error

Cutoff

Choose a cutoff time.

Source

<div class="max-w-xs">
        <sigta:time-picker label="Cutoff" name="cutoff" error="Choose a cutoff time." />
    </div>

Disabled

Locked

Source

<div class="max-w-xs">
        <sigta:time-picker label="Locked" name="locked" value="12:00" disabled />
    </div>