The Changelog
What's new around here?
Succinct and informative updates about Flux.
October 15, 2025
Time picker
Version ^2.6.0
Introducing the Time Picker component—for when you need users to select specific times. Perfect for scheduling appointments, filtering by time ranges, or any scenario where precise time selection matters.
The component handles all the complexity: 12/24-hour formats, time intervals, unavailable slots, keyboard navigation, and proper localization.
Copy to clipboard
<flux:time-picker wire:model="appointmentTime" />Input or button trigger
Choose between a button trigger that opens a time selection dropdown, or an input trigger that gives you a native time input with optional dropdown enhancement:
Copy to clipboard
<flux:time-picker type="button" /><flux:time-picker type="input" />The input variant even lets you disable the dropdown entirely with :dropdown="false" if you want a pure native experience.
Control your intervals
Set the interval between displayed times with the interval prop. Default is 30 minutes, but you can use any number:
Copy to clipboard
<flux:time-picker interval="15" /> <!-- 15-minute intervals --><flux:time-picker interval="60" /> <!-- Hourly -->Min, max, and unavailable times
Restrict selectable times with min and max boundaries—perfect for business hours or time-based constraints:
Copy to clipboard
<flux:time-picker min="09:00" max="17:00" />There's even a convenient "now" shorthand:
Copy to clipboard
<flux:time-picker min="now" /> <!-- Only future times -->Need to block out specific times or time ranges? Use the unavailable prop to disable booked appointments or unavailable slots:
Copy to clipboard
<flux:time-picker unavailable="03:00,04:00,05:30-07:29" />Multiple time selection
Allow users to select multiple times with the multiple prop:
Copy to clipboard
<flux:time-picker multiple wire:model="availableTimes" />Automatic localization
The time picker automatically uses the browser's locale to determine time format, but you can override it:
Copy to clipboard
<flux:time-picker time-format="12-hour" /><flux:time-picker time-format="24-hour" /><flux:time-picker locale="ja-JP" />The details
Like every component in Flux, we left no stone unturned:
Keyboard friendly: Full keyboard navigation with arrow keys, Enter to select, and Escape to close. Screen readers announce all state changes and available options.
Smart defaults: The picker opens to the currently selected time, or the current time if nothing is selected. You can override this with open-to if needed.
Seamless integration: Works with all standard field props like label, description, and badge for automatic field wrapping.