Laravel Time Picker Component

Free · MIT

Time selection input with step increments, min/max constraints, and a searchable dropdown of time slots.

A Time Picker built for the TALL stack — Blade, Livewire 3 & 4, Alpine.js and Tailwind CSS 4. Server-rendered by default, dark-mode ready, and WCAG-minded. Drop it in with a single Blade tag: <x-aura::time-picker>

Try it live in the docs Install free

Installation

composer require bluestarsystem/aura-ui

Usage

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

See the full API, props and live examples in the Time Picker documentation.

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.

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`.