The Changelog
What's new around here?
Succinct and informative updates about Flux.
November 25, 2025
OTP Input
Version ^2.8.0
Two-factor authentication, email verification codes, PIN entries—OTP inputs are everywhere. We figured Flux should handle them beautifully.
Meet OTP Input, a component for capturing one-time passwords with individual input fields. Let's take a look.
Copy to clipboard
<flux:otp wire:model="code" length="6" />Auto-submit
Add submit="auto" and the form submits automatically once all fields are filled—no submit button needed. Perfect for streamlined verification flows where speed matters.
Copy to clipboard
<flux:otp wire:model="code" length="6" submit="auto" />More than numbers
Need alphanumeric codes or PINs? The mode prop has you covered. Set it to alphanumeric for license keys, or use private to mask sensitive values like PIN codes.
Copy to clipboard
<!-- License keys --><flux:otp wire:model="licenseKey" length="10" mode="alphanumeric" /><!-- PIN codes --><flux:otp wire:model="pin" length="4" private />Custom layouts
Use separators and groups to match your design. Great for phone numbers, credit cards, or any grouped format:
Copy to clipboard
<flux:otp wire:model="code"> <flux:otp.group> <flux:otp.input /> <flux:otp.input /> <flux:otp.input /> </flux:otp.group> <flux:otp.separator /> <flux:otp.group> <flux:otp.input /> <flux:otp.input /> <flux:otp.input /> </flux:otp.group></flux:otp>Smart input behavior
As always we went to great lengths to make sure this component is world-class.
Smart paste: Paste an entire code and it automatically distributes the characters across all input fields—no need to manually type each digit.
Intelligent navigation: Arrow keys move between fields, backspace jumps back to clear previous digits, and typing automatically advances to the next field.
Autocomplete support: The first field includes autocomplete="one-time-code" by default, so browsers and password managers can automatically suggest codes from SMS or authenticator apps.
Accessibility
And of course, we made sure this component honors expected keyboard navigation, proper focus management, and appropriate ARIA labels so that screen readers can use it just as well. Each input announces its position and the total number of digits expected.
Check out the OTP Input documentation for more examples and the full API reference.
November 24, 2025
Composer
Version ^2.7.1
AI is everywhere, and chat interfaces are the new norm. We figured it was time Flux had a proper message input built for exactly this.
Meet Composer, a configurable message input with support for action buttons and rich text. Let's take a look.
Copy to clipboard
<flux:composer wire:model="prompt" placeholder="How can I help you today?"> <x-slot name="actionsLeading"> <flux:button size="sm" variant="subtle" icon="paper-clip" /> </x-slot> <x-slot name="actionsTrailing"> <flux:button type="submit" size="sm" variant="primary" icon="paper-airplane" /> </x-slot></flux:composer>Two layouts
By default, action buttons sit below the input in their own row. Add the inline prop to place them alongside the input for a more compact look—great for single-line prompts.
Copy to clipboard
<flux:composer inline rows="1" ...> ...</flux:composer>Rich text
Need formatting? Swap out the default textarea for a full rich text editor by passing an editor component to the input slot.
Copy to clipboard
<flux:composer wire:model="prompt" rows="3" ...> <x-slot name="input"> <flux:editor variant="borderless" toolbar="bold italic bullet ordered | link" /> </x-slot> ...</flux:composer>Submit behavior
By default, pressing Cmd/Ctrl + Enter submits the form. For a chat-style experience where Enter sends immediately, just add submit="enter".
Copy to clipboard
<flux:composer submit="enter" ...> ...</flux:composer>Height control
Set the initial height with rows and let it grow with max-rows. The input auto-expands as users type, then becomes scrollable.
Copy to clipboard
<flux:composer rows="4" max-rows="8" ...> ...</flux:composer>Accessibility
And of course, we went to great lengths to make sure this component honors expected keyboard navigation, focus behavior, and proper aria-labels so that screen readers can use it just as well.
Check out the Composer documentation for more examples and the full API reference.
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.