# Multi-selects

Published: November 13, 2024

Version: ^1.0.23

<img class="rounded-2xl border" src="/img/blog/1_0_23_multiple.png" alt="Select dropdown with 2 items selected" />

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:

```php
<flux:select variant="listbox" multiple>
    <flux:option>Photography</flux:option>
    ...
</flux: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:

```php
<flux:select wire:model="selected" variant="listbox" multiple>
```

```php
<?php

class extends Livewire\Component
{
    public $selected = [];
    
    ...
}
```
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.

[Read more about multi-selects ->](https://fluxui.dev/components/select#multiple-select)

## Custom selected suffix

<img class="rounded-2xl border" src="/img/blog/1_0_23_suffix.png" alt="A select dropdown with the words: 2 industries selected" />

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:

```php
<flux:select selected-suffix="industries selected" variant="listbox" multiple>
```

[Read more about selected suffixes ->](https://fluxui.dev/components/select#selected-suffix)

## Checkbox indicator

<img class="rounded-2xl border" src="/img/blog/1_0_23_indicator.png" alt="A select dropdown with checkboxes instead simple check marks for selected indicator icons" />

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:

```php
<flux:select indicator="checkbox" variant="listbox" multiple>
```

[Read more about custom select indicators ->](https://fluxui.dev/components/select#checkbox-indicator)

## Changelog

* Support for multi-selects
* Dispatch input events when select listbox clearable button is clicked so that wire:model.live picks up the change

[View full release on GitHub](https://github.com/livewire/flux/releases/tag/v1.0.23)