blatui

Components

Time Field

A time input with native and dropdown variants, 12/24-hour and seconds.

php artisan blatui:add time-field 
<x-ui.time-field name="time" value="10:30" aria-label="Time" />

Select

: 
<x-ui.time-field name="time" value="14:15" variant="select" hour-cycle="12" :minute-step="5" />

Select 24H

: 
{{-- 24-hour clock with dropdowns: hours 00–23, no AM/PM segment.
     Same on the datetime-picker: time-variant="select" hour-cycle="24". --}}
<x-ui.time-field name="time" value="14:15" variant="select" hour-cycle="24" :minute-step="5" />

With Seconds

:
: 
<x-ui.time-field name="time" value="10:30:45" variant="select" hour-cycle="24" :seconds="true" />

Using with Livewire

wire:model

The examples above are the frontend (Blade + Alpine) usage. Inside a Livewire component, bind wire:model for two-way state — same component, no wrappers. Full Livewire guide →

app/Livewire/Demo.php 
use Livewire\Component;

class Demo extends Component
{
    public ?string $time = null;

    public function render()
    {
        return view('livewire.demo');
    }
}
resources/views/livewire/demo.blade.php 
<x-ui.time-field wire:model="time" />

API Reference

Props, slots and exposed methods for <x-ui.time-field>.

Props

Prop Type Default Description
name string — Form field name. When set, a hidden input submits the value as "HH:mm" (or "HH:mm:ss").
value string — Initial time, as "HH:mm" or "HH:mm:ss".
variant string 'input' input renders a native time input (segmented editing, keyboard, mobile wheel); select renders native hour/minute dropdowns.
input select
hourCycle string 'auto' Clock format for the select variant and display. auto follows the visitor's locale; 12 adds an AM/PM dropdown.
auto 12 24
seconds bool false Include a seconds component in the control and the emitted value.
minuteStep int 1 Minute increment (e.g. 15 for quarter-hour stepping). Applies to both variants.
secondStep int 1 Second increment, used only when seconds is enabled.
min string — Earliest selectable time ("HH:mm"). Input variant only.
max string — Latest selectable time ("HH:mm"). Input variant only.
disabled bool false Disable the control so it cannot be edited.
id string — id applied to the underlying control, e.g. to pair with a label.
part string — Composition tag echoed back in the time-change event's detail.part (e.g. "from"/"to"). Used by datetime-picker to tell which field changed.

Methods

Available on the component's Alpine scope — call them from markup in the slot (e.g. @click="…").

Method Description
fromInput(value) Input variant: sets the value from the native control and dispatches the time-change event.
sync() Recomputes the "HH:mm" value from the hour/minute/second parts and dispatches the time-change event.