Skip to content

Pro Component — This component requires an Aura UI Pro license.

Overview

The Time Picker component provides an input for selecting times with a searchable dropdown of time slots. It supports configurable step intervals (15, 30, 60 minutes), min/max time constraints, and an inline filter to quickly find a slot. Integrates with Livewire via wire:model for form binding. Times are displayed in 24-hour format.

Basic Usage

<x-aura::time-picker
    label="Time"
    wire:model="time"
/>

Props

Prop Type Default Description
label string|null null Label text displayed above the input.
placeholder string 'HH:MM' Placeholder text when no time is selected.
step int 15 Interval between time slots in minutes (e.g., 15, 30, 60).
min string '00:00' Earliest selectable time (e.g., '08:00').
max string '23:59' Latest selectable time (e.g., '18:00').
disabled bool false Disable the input.
clearable bool true Show a clear button when a time is selected.
error string|null null Error message displayed below the input.
hint string|null null Hint text displayed below the input.
size string 'md' Input size: sm, md, lg.

Examples

Appointment Time Selection

<x-aura::time-picker
    label="Appointment Time"
    :step="30"
    min="09:00"
    max="17:00"
    wire:model="appointmentTime"
/>

15-Minute Intervals

<x-aura::time-picker
    label="Meeting Time"
    :step="15"
    min="08:00"
    max="20:00"
    wire:model="meetingTime"
/>

Hourly Intervals (Business Hours)

<x-aura::time-picker
    label="Opening Time"
    :step="60"
    min="06:00"
    max="22:00"
    wire:model="openingTime"
/>

Livewire Form with Start and End Times

<!-- Blade view -->
<div class="space-y-4">
    <x-aura::date-picker
        label="Date"
        wire:model="date"
        min="{{ now()->format('Y-m-d') }}"
    />

    <div class="grid grid-cols-2 gap-4">
        <x-aura::time-picker
            label="Start Time"
            :step="30"
            min="08:00"
            max="20:00"
            wire:model.live="startTime"
        />

        <x-aura::time-picker
            label="End Time"
            :step="30"
            :min="$startTime ?? '08:00'"
            max="21:00"
            wire:model="endTime"
        />
    </div>

    @error('startTime')
        <p class="text-sm text-red-600">{{ $message }}</p>
    @enderror
</div>

// Livewire component
class BookingForm extends Component
{
    public ?string $date = null;
    public ?string $startTime = null;
    public ?string $endTime = null;

    public function updatedStartTime(): void
    {
        // Auto-set end time 1 hour after start
        if ($this->startTime && !$this->endTime) {
            $start = \Carbon\Carbon::createFromFormat('H:i', $this->startTime);
            $this->endTime = $start->addHour()->format('H:i');
        }
    }

    protected function rules(): array
    {
        return [
            'date' => 'required|date|after_or_equal:today',
            'startTime' => 'required|date_format:H:i',
            'endTime' => 'required|date_format:H:i|after:startTime',
        ];
    }
}

Slots

Slot Description
default Not used. The time dropdown is generated from props.

Accessibility

  • The input uses role="combobox" with aria-haspopup="listbox".
  • The time dropdown uses role="listbox" with each time slot as role="option".
  • aria-expanded indicates whether the dropdown is visible.
  • aria-activedescendant tracks the currently highlighted time slot.
  • Disabled time slots (outside min/max range) have aria-disabled="true".
  • Arrow Up/Down navigate through time slots.
  • Enter selects the highlighted time.
  • Escape closes the dropdown.
  • The text input displays the selected time in 24-hour format.
  • The label is associated with the input via for/id attributes.
  • The dropdown includes a search filter for quick access to specific times.