We held off on releasing multi-selects at launch because we felt like there were too many decisions to get right, but here we are. In Flux version 1.0.23 and above, you are now able to pass the
multiple
prop and turn a single-select into a multi-select:
Of course, data binding works as you'd expect, by passing the name of a Livewire property into
wire:model
, Livewire will keep the state of that property in sync with your selections:
We have big plans for the future of multi-select, like adding new variants for selecting pills, tags, avatars, etc., but for now, this is a good start.
After your first selection, Flux shows the number of items selected, followed by the word "selected".
If you want to customize this to make it more contextual, you can do so using the
selected-suffix
prop:
The default check mark icon is now configurable for multi-selects. If you want a checkbox visual indicator instead, you can use the new
indicator
prop: