Phara UI v2.x
Login

Time Picker

A time input component with separate HH / MM / SS fields, a scrollable dropdown of presets, and optional 12-hour AM/PM mode. Stores values in 24h HH:MM format.

Basic (24h)

Default 24-hour format. Type directly into the HH and MM fields, or click the clock icon to pick from a dropdown of 30-minute slots.

:
Blade 
<x-ui::time-picker name="time" />
12-hour Format

Add format="12" to show an AM/PM toggle. Click the button to switch meridiem. The hidden input always stores the value in 24h format.

:
Blade 
<x-ui::time-picker name="meeting_time" format="12" />
With Seconds

Add with-seconds to show a third SS input. Focus auto-advances HH → MM → SS as each field reaches two digits.

:
:
Blade 
{{-- 24h with seconds --}}
<x-ui::time-picker name="duration" with-seconds />

{{-- 12h with seconds --}}
<x-ui::time-picker name="broadcast_at" format="12" with-seconds />
Custom Step

The step prop controls the minute interval between options in the dropdown. Use 15 for quarter-hours, 60 for hourly slots.

step=15

:

step=60 (12h)

:
Blade 
{{-- Every 15 minutes --}}
<x-ui::time-picker name="appointment" :step="15" />

{{-- Every hour --}}
<x-ui::time-picker name="shift_start" :step="60" format="12" />
Pre-selected

Pass a value in HH:MM (or HH:MM:SS) 24h format to pre-populate the fields on render. Works with both 12h and 24h display modes.

:
:
:
Blade 
{{-- Pre-filled 24h --}}
<x-ui::time-picker name="opens_at" value="09:00" />

{{-- Pre-filled 12h —displays as 02:30 PM --}}
<x-ui::time-picker name="closes_at" format="12" value="14:30" />

{{-- Pre-filled with seconds --}}
<x-ui::time-picker name="recorded_at" value="08:45:30" with-seconds />
With Label

The label prop renders a descriptive text above the inputs — useful inside forms and settings panels.

:
:
Blade 
<x-ui::time-picker
    name="opening_time"
    label="Opening time"
    value="08:00"
/>

<x-ui::time-picker
    name="closing_time"
    label="Closing time"
    format="12"
    value="17:00"
    :step="15"
/>
In a Form

A scheduling card composing the time picker alongside the date picker, input, and select components.

Schedule event

Set the date, time, and recurrence for your event.

/ /
:
:
Blade 
<x-ui::card>
    <div class="space-y-1 mb-6">
        <x-ui::heading level="6">Schedule event</x-ui::heading>
        <x-ui::text variant="muted">Set the date, time, and recurrence for your event.</x-ui::text>
    </div>

    <form class="space-y-5">
        <x-ui::input
            name="event_title"
            label="Event title"
            placeholder="Team standup"
        />

        <div class="grid grid-cols-2 gap-4">
            <div>
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Date</label>
                <x-ui::date-picker name="event_date" />
            </div>
            <x-ui::time-picker
                name="event_time"
                label="Start time"
                format="12"
                value="09:00"
                :step="15"
            />
        </div>

        <div class="grid grid-cols-2 gap-4">
            <x-ui::time-picker
                name="end_time"
                label="End time"
                format="12"
                value="10:00"
                :step="15"
            />
            <div class="space-y-1">
                <label class="block text-sm font-medium text-gray-700 dark:text-gray-200 mb-1">Repeat</label>
                <x-ui::select name="recurrence">
                    <option value="none">Does not repeat</option>
                    <option value="daily">Daily</option>
                    <option value="weekly">Weekly</option>
                    <option value="monthly">Monthly</option>
                </x-ui::select>
            </div>
        </div>

        <x-ui::textarea
            name="description"
            label="Description"
            placeholder="Add a description..."
            :rows="3"
        />

        <div class="flex justify-end gap-3 pt-2">
            <x-ui::button variant="ghost">Cancel</x-ui::button>
            <x-ui::button variant="primary">Save event</x-ui::button>
        </div>
    </form>
</x-ui::card>