The Changelog
What's new around here?
Succinct and informative updates about Flux.
RSS feed
October 22, 2026
Meet the new Datetime picker: a date and a time, picked together from a single field. Perfect for scheduling events, publishing posts, setting reminders, or booking a window of time.
Copy to clipboard
<flux:datetime-picker wire:model="startsAt" />Choose a day from the calendar and a time from the list beside it. Picking a time closes the picker, and changing just the date updates the value straight away. No extra clicks.
On the Livewire side, type hint a Carbon property and you're done:
Copy to clipboard
public ?Carbon $startsAt;Made for mobile
A calendar and a time list don't fit side by side on a phone, so on small screens the time moves into a dropdown below the calendar. Selections are confirmed with a "Select" button, so a stray tap never changes the value.
Ranges, with a time on each end
Add mode="range" for event schedules, maintenance windows, or bookings. Each end of the range gets its own time, and the range is applied when "Select range" is pressed:
Copy to clipboard
<flux:datetime-picker mode="range" wire:model="schedule" />Bind it to a Flux\DateTimeRange and you get Carbon instances for the start and end. It's a CarbonPeriod under the hood, so you can pass it straight to whereBetween():
Copy to clipboard
$deploys = Deploy::whereBetween('deployed_at', $this->schedule)->get();When most ranges share the same hours, set them once with default-time and users only need to pick dates:
Copy to clipboard
<flux:datetime-picker mode="range" default-time="09:00/17:00" />Business hours and booked slots
Use min and max to limit which dates can be picked, and min-time and max-time to limit the times of day. Together they cover things like "any future time between 9 AM and 5 PM":
Copy to clipboard
<flux:datetime-picker min="now" min-time="09:00" max-time="17:00" />The unavailable prop blocks out whole days, the same times on every day, or individual slots on a specific day. You can mix them freely:
Copy to clipboard
<flux:datetime-picker unavailable="2026-12-25, 12:00-13:00, 2026-10-14T10:00" />It also takes an array of Carbon instances, so blocking out existing bookings is one line:
Copy to clipboard
<flux:datetime-picker wire:model="startsAt" :unavailable="$bookings->pluck('starts_at')"/>Down to the minute
The time list steps in 30-minute intervals by default. Change it with interval, or set time="input" when users need to type an exact time. The input still suggests times in a dropdown:
Copy to clipboard
<flux:datetime-picker interval="15" /><flux:datetime-picker time="input" />All. The. Details.
Localized: Month names, weekdays, date formats, and the 12 or 24-hour clock follow the user's locale. Override them with locale and time-format.
Your calendar options: Everything you know from the date picker works here too, like with-today, selectable-header, week-numbers, and start-day.
Bring your own trigger: Open the picker from any button using the trigger slot. Handy for a "Schedule" button in a toolbar.
Wall-clock times: The value works like a native datetime-local input, 2026-10-14T10:30, with no hidden timezone conversions.
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.
Datetime picker is available in Flux Pro v2.21.0.
September 28, 2026
We've rebuilt Flux's Card to give your app beautifully aligned cards, with the spacing, surfaces, and corners already figured out.
We're proud of the details in this one. Buttons sit just right in headers, inner corners follow outer curves, and each layout gets its own carefully tuned spacing.
Compose a card from headers, bodies, and footers, and those details come with it:
Copy to clipboard
<flux:card body="inset" variant="soft"> <flux:card.header> <flux:card.heading>Notifications</flux:card.heading> <flux:card.subheading>Choose what you hear about</flux:card.subheading> </flux:card.header> <flux:card.body class="space-y-4"> <flux:switch label="Product updates" checked /> <flux:switch label="Weekly digest" /> </flux:card.body></flux:card>Every part is optional. Use only the pieces a card needs, or put content straight inside and it's padded evenly.
Surfaces
The variant prop gives you five surfaces. The default has a shadow in light mode and elevation in dark mode, while outline keeps the border without either. muted and soft offer quieter tints, and filled drops the border entirely. The tints adapt to the background underneath, with colors tuned for light and dark mode. Mix them freely without losing consistency.
Body treatments
The body prop changes how the parts meet. seamless keeps everything on one surface, divided adds lines, separated adds tinted bands, and inset or flush gives the body its own panel.
Each treatment has its own spacing for a reason. With no boundaries between parts, seamless cards can sit tighter. Dividers and panels need more room so nothing feels crammed.
Headers and corners
Small buttons in flux:card.actions hang into the header's padding, with equal space from the top and side edges. Their labels line up with the heading text without making the header taller. Bigger controls get the space they need, and actions placed before the heading move to the leading side.
Look at the profile card in the hero: its body is inset, with corners rounded concentrically to the card's, so the gap between the curves stays even all the way around.
Headers and footers also work on their own outside a card, or as sub-sections nested inside a body.
Sizes
Card comes in four sizes: xs, sm, md, and lg. Each has individually tuned padding, typography, corners, and gaps, from compact sidebar cards to roomy settings forms.
Bleed
Let images fill the body, right up to its rounded edges, while the footer keeps its own padding and room for actions. Wrap the image in flux:card.bleed and the card handles the fit. Tables have a bleed prop too: rows run edge to edge while their content stays aligned with the rest of the card.
We tuned every size, color, border, and line of text by hand, across each surface and body treatment. And since every card is built from the same few parts, your design holds together whether you're writing the markup yourself or an LLM is generating it. All those little decisions are now yours to reuse. 👌
Card is part of free Flux.
September 15, 2026
Flux now has a Phone input component, with a searchable country picker and automatic formatting for international phone numbers.
Copy to clipboard
<flux:phone wire:model="phone" country="US" label="Phone number" />The field displays a familiar local format, like (201) 555-0123, while the value bound to Livewire becomes +12015550123. That's E.164, the international format with a country calling code up front. Incomplete numbers stay as typed while someone is editing.
A country picker built in
The picker shows flags, country names, and calling codes. You can search for a country or paste an international number directly into the field, and Flux updates the selected country for you.
If most of your users are in a few countries, put those choices first:
Copy to clipboard
<flux:phone :country-order="['US', 'CA', 'GB', 'AU']" />You can also narrow the picker with countries. The usual Flux labels, descriptions, filled variant, and compact sizes work here too, so it fits alongside your other inputs.
Formatting doesn't replace validation. Validate submitted numbers on your server, including any country restrictions your app needs.
Phone input is available in Flux Pro v2.20.0.