Time Picker

The <x-wirekit::time-picker> component is a styled wrapper around the native <input type="time">. It uses the browser's built-in time selection UI for zero dependencies and automatic localization.

Basic Usage

<x-wirekit::time-picker label="Appointment" name="appointment" value="14:30" />

12-Hour Format

<x-wirekit::time-picker label="Meeting time" name="meeting" format="12h" value="09:00" />

Regardless of how the field is displayed, the submitted value is always in 24-hour HH:MM format (the native <input type="time"> standard).

Note: Whether the field reads as AM/PM or as 24 hours is decided entirely by the browser and the operating system locale — HTML has no attribute that overrides it, so neither does WireKit. The format prop records which reading your interface is written for; it does not change what the control shows. If a specific display is a hard requirement, render the time as text next to the field and keep the input for editing.

With Step (Minutes Interval)

<x-wirekit::time-picker label="Slot" name="slot" :step="900" hint="Available in 15-minute intervals" />

The step attribute is in seconds. Common values: 60 (1 min), 300 (5 min), 900 (15 min), 1800 (30 min), 3600 (1 hour). It reaches the native control, so it governs both what the field accepts and how far ArrowUp / ArrowDown move the focused segment. Left unset, the browser's own default of one minute applies.

Size Variants

<x-wirekit::time-picker name="t-sm" label="Small" size="sm" value="08:00" />

<x-wirekit::time-picker name="t-md" label="Medium" size="md" value="12:00" />

<x-wirekit::time-picker name="t-lg" label="Large" size="lg" value="18:00" />

Error State

<x-wirekit::time-picker label="Start time" name="start-error-demo" error="Please select a valid time." />

With Hint

<x-wirekit::time-picker label="Reminder" name="reminder" hint="We will notify you at this time daily." />

Width

Like all WireKit form components, the time picker fills its container (w-full). Time fields are typically narrow — constrain the width via the parent element:

<div class="max-w-[10rem]">
    <x-wirekit::time-picker label="Start time" name="start_time" />
</div>

See Input — Width for more layout examples (grid columns, mixed widths).

Why Native?

The native <input type="time"> provides:

• Zero dependencies — no JavaScript time picker library to ship
• Automatic localization — the browser renders AM/PM or 24-hour based on OS locale
• Full accessibility — arrow keys, spinners, and keyboard input work out of the box
• Mobile keyboards — native time wheels on iOS, spinners on Android
• Consistent value format — always HH:MM regardless of display

Optimistic UI

Pass the name of the Livewire method this component should call and the change appears immediately, then confirms or undoes itself when the server answers:

<x-wirekit::time-picker
    label="Start time"
    name="start"
    :value="$start"
    optimistic="setStart"
/>

Load wirekit-optimistic.js alongside whichever bundle you already use — it is a separate file so applications that do not use it pay nothing for it:

@wirekitScripts
<script src="{{ asset('vendor/wirekit/wirekit-optimistic.js') }}" defer></script>

Try it

The demo below runs the real path: the change shows immediately, the outline says it is provisional, and the server's answer either confirms it silently or takes it back.

{{-- In your app there is no host: your own Livewire component owns the method. --}}
<x-wirekit::time-picker
    label="Start time"
    name="start"
    :value="$start"
    optimistic="setStart"
/>

The <livewire:demos.…> wrapper above exists only on this site — it supplies the demo methods so the page can show a real round trip. The block under it is what you write.

The same shape as the other native form controls: the browser has already changed the value by the time any handler runs, so what this adds is the confirmation, the undo, and the announcement.

What a screen reader hears is the same for every component that supports this, and it is written out in full — one hedged announcement at the change, silence on confirmation, one more only if the server refuses, and focus that never moves — in Optimistic UI — the announcement contract. That page is also where the boundary is stated: this covers mutations, not sorting, filtering or pagination.

Props

Slots

Accessibility

• Native <input type="time"> — full browser a11y and keyboard support
• aria-invalid="true" and aria-describedby set on error
• required passes straight through to the native input, which is what announces the field as required — no aria-required is added, because on a native control the attribute would only restate what the element already exposes
• Hint text linked via aria-describedby
• Focus ring visible via focus-visible styling
• Arrow keys increment/decrement hours and minutes (native behavior)
• The value is always submitted in ISO HH:MM format regardless of locale display

Keyboard Interaction

Pitfalls

• Don't use time-picker for durations. Native <input type="time"> represents a clock time, not "2 hours 30 minutes". For durations use two <x-wirekit::number-input> (hours / minutes).
• Don't bind a date object. Livewire sends a Carbon property, or a property that holds a date, to the browser as a full timestamp, which <input type="time"> drops, so the field stays empty. Bind a string property that holds ->format('H:i') and convert it when you save. In debug mode the component logs a warning for a binding to a date object.

Design Tokens

Customization

Override defaults in config/wirekit.php:

'components' => [
    'time-picker' => ['size' => 'md'],
],

Further Reading

• MDN: <input type="time">
• MDN: Date and time input types
• Can I Use: input type=time — browser support matrix
• MDN: step attribute
• MDN: aria-invalid