<x-bt-time-picker />
Customize via presets →
Basic Usage
A simple time picker with 24-hour format. Click the trigger to open the wheel dropdown.
1<x-bt-time-picker label="Meeting Time" />12-Hour Format (AM/PM)
Use format="h:i A" for 12-hour mode with AM/PM toggle buttons. The stored value is always in 24-hour format.
1<x-bt-time-picker label="12-Hour Format" format="h:i A" />Seconds
Enable the seconds wheel with :seconds="true". The stored value format becomes HH:mm:ss.
24-Hour with Seconds
1<x-bt-time-picker label="Precise Time" :seconds="true" />12-Hour with Seconds
Combine seconds with 12-hour mode for full precision.
1<x-bt-time-picker label="Full Precision" format="h:i A" :seconds="true" value="02:30:15" />Interval
Only show minutes that are multiples of the interval. Useful for appointment slots.
1<x-bt-time-picker label="15-Minute Slots" :interval="15" />2<x-bt-time-picker label="30-Minute Slots" :interval="30" />Min & Max Range
Restrict selectable times. Hours and minutes outside the range are disabled and automatically skipped in the wheel.
1<x-bt-time-picker label="Business Hours" min="08:00" max="17:30" />Combined with Interval
Combine min/max with an interval for structured appointment booking.
1<x-bt-time-picker label="Appointments" :interval="30" min="09:00" max="16:00" />Sizes
Inherited from the input trigger base. Default is md.
1<x-bt-time-picker xs label="Extra Small" />2<x-bt-time-picker sm label="Small" />3<x-bt-time-picker label="Medium (default)" />4<x-bt-time-picker lg label="Large" />5<x-bt-time-picker xl label="Extra Large" />Colors
Colors affect the wheel highlight, selected value accent, AM/PM button, Now button, and trigger border on focus.
1<x-bt-time-picker label="Default (primary)" value="10:00" />2<x-bt-time-picker blue label="Blue" value="10:00" />3<x-bt-time-picker red label="Red" value="10:00" />4<x-bt-time-picker green label="Green" value="10:00" />5<x-bt-time-picker purple label="Purple" value="10:00" />All available colors
primary, beartropy, red, blue, green, yellow, purple, pink, gray, orange, amber, lime, emerald, teal, cyan, sky, indigo, violet, rose, fuchsia, slate, stone, zinc, neutral.
Use the color prop or magic attributes: <x-bt-time-picker blue />.
Clearable
A clear button is shown by default when a value is selected. Disable it with :clearable="false".
1<x-bt-time-picker label="Clearable (default)" value="09:00" />2<x-bt-time-picker label="Not Clearable" :clearable="false" value="09:00" />Disabled
Prevents opening the time wheel or changing the value.
1<x-bt-time-picker label="Locked" :disabled="true" value="10:00" />Validation Errors
Errors are automatically detected from the Laravel validation error bag using the wire:model name. You can also force an error with custom-error.
Auto Validation
Submit without selecting a time to see the error.
1<x-bt-time-picker id="time-validated" wire:model="validatedTime" label="Check-in Time" />2<x-bt-button wire:click="submitTime" solid blue class="mt-3">Submit</x-bt-button>Custom Error
Please select a valid time.
1<x-bt-time-picker label="Time" :custom-error="'Please select a valid time.'" />Help Text
Choose your preferred time.
Format: HH:mm (24-hour)
1<x-bt-time-picker label="Time" help="Choose your preferred time." />2<x-bt-time-picker label="Time" hint="Format: HH:mm (24-hour)" />Livewire Integration
Deferred Binding
1<x-bt-time-picker id="time-deferred" wire:model="deferredTime" label="Deferred Binding" />Live Binding
Use wire:model.live to update the Livewire property immediately when the time changes.
Selected: none
1<x-bt-time-picker id="time-live" wire:model.live="liveTime" label="Live Binding" />2<p class="text-sm text-gray-500 mt-2">Selected: <strong>{{ $liveTime ?? 'none' }}</strong></p>Vanilla Form
When no wire:model is present, a hidden <input> is rendered automatically for standard form submission.
1<x-bt-time-picker label="Start Time" name="start_time" value="14:30" />Real-World Example
A meeting scheduler form combining time pickers with an input and button.
1<div class="max-w-md space-y-4"> 2 <x-bt-input label="Meeting Title" placeholder="e.g. Sprint Planning" icon="clock" /> 3 <div class="grid grid-cols-2 gap-4"> 4 <x-bt-time-picker 5 label="Start" 6 :interval="15" 7 min="08:00" 8 max="18:00" 9 blue10 placeholder="Start time..."11 />12 <x-bt-time-picker13 label="End"14 :interval="15"15 min="08:00"16 max="18:00"17 blue18 placeholder="End time..."19 />20 </div>21 <x-bt-button solid blue class="w-full">Create Meeting</x-bt-button>22</div>Props
| Prop | Type | Default | Description |
|---|---|---|---|
label
|
string|null
|
null
|
Label text above the input.
|
placeholder
|
string|null
|
auto
|
Placeholder text when no time is selected. Defaults to "Select time...".
|
value
|
mixed
|
null
|
Initial value in
HH:mm or HH:mm:ss format.
|
format
|
string
|
H:i
|
Time format.
H:i for 24-hour, h:i A for 12-hour with AM/PM. The stored value is always in 24-hour format.
|
color
|
string|null
|
config default
|
Color preset name. Supports magic attributes:
<x-bt-time-picker blue />.
|
id
|
string|null
|
auto-generated
|
Component ID. Auto-generates as
beartropy-timepicker-{uniqid} when not provided.
|
name
|
string|null
|
falls back to id
|
Input name for form submission.
|
min
|
string|null
|
null
|
Minimum allowed time in
HH:mm format. Disabled times are skipped in the wheel.
|
max
|
string|null
|
null
|
Maximum allowed time in
HH:mm format. Disabled times are skipped in the wheel.
|
interval
|
int
|
1
|
Minute step interval. Common values:
1, 5, 10, 15, 30, 60.
|
seconds
|
bool
|
false
|
Show a seconds wheel. The stored value format becomes
HH:mm:ss.
|
disabled
|
bool
|
false
|
Disables interaction, preventing opening the wheel.
|
readonly
|
bool
|
false
|
Readonly state. Displays the value but prevents changes.
|
clearable
|
bool
|
true
|
Show a clear button when a value is selected.
|
customError
|
mixed
|
null
|
Custom error message that bypasses the validation bag.
|
help
|
string|null
|
null
|
Help text displayed below the input.
|
hint
|
string|null
|
null
|
Alias for
help.
|