Components
Select
You’re browsing the documentation for an old version of Flux. Go to v2.x ->
Guides
Installation Principles Patterns Theming Dark mode Customization Help
Layouts
Header Sidebar
Components
Accordion Autocomplete Badge Button Breadcrumbs Card Checkbox Command Context Dropdown Editor
New
Field Heading Icon Input Modal Navbar Radio Select Separator Switch Table Tabs Textarea Toast Tooltip

Select

Choose a single option from a dropdown list.

For lists of up to 5 items, consider using checkboxes or radio buttons instead.
Copy to clipboard 
<flux:select wire:model="industry" placeholder="Choose industry...">    <flux:option>Photography</flux:option>    <flux:option>Design services</flux:option>    <flux:option>Web development</flux:option>    <flux:option>Accounting</flux:option>    <flux:option>Legal services</flux:option>    <flux:option>Consulting</flux:option>    <flux:option>Other</flux:option></flux:select>

Small

A smaller select element for more compact layouts.

<flux:select size="sm" placeholder="Choose industry...">    <flux:option>Photography</flux:option>    <flux:option>Design services</flux:option>    <flux:option>Web development</flux:option>    <flux:option>Accounting</flux:option>    <flux:option>Legal services</flux:option>    <flux:option>Consulting</flux:option>    <flux:option>Other</flux:option></flux:select>
Log in to view

Custom select

An alternative to the browser's native select element. Typically used when you need custom option styling like icons, images, and other treatments.

Photography
Design services
Web development
Accounting
Legal services
Consulting
Other 
<flux:select variant="listbox" placeholder="Choose industry...">    <flux:option>Photography</flux:option>    <flux:option>Design services</flux:option>    <flux:option>Web development</flux:option>    <flux:option>Accounting</flux:option>    <flux:option>Legal services</flux:option>    <flux:option>Consulting</flux:option>    <flux:option>Other</flux:option></flux:select>
Log in to view

The button slot

If you need full control over the button used to trigger the custom select, you can use the button slot to render it yourself.
Copy to clipboard 
<flux:select variant="listbox">    <x-slot name="button">        <flux:select.button class="rounded-full!" placeholder="Choose industry..." :invalid="$errors->has('...')" />    </x-slot>    <flux:option>Photography</flux:option>    ...</flux:select>

Clearable

If you want to make the selected value clearable, you can use the clearable prop to add an "x" button to the right side of the input:
Copy to clipboard 
<flux:select variant="listbox" clearable>    ...</flux:select>

Options with images/icons

One distinct advantage of using a custom listbox select over the native <select> element is that you can now add icons and images to your options.
Owner
Administrator
Member
Viewer 
<flux:select variant="listbox" placeholder="Select role...">    <flux:option>        <div class="flex items-center gap-2">            <flux:icon.shield-check variant="mini" class="text-zinc-400" /> Owner        </div>    </flux:option>    <flux:option>        <div class="flex items-center gap-2">            <flux:icon.key variant="mini" class="text-zinc-400" /> Administrator        </div>    </flux:option>    <flux:option>        <div class="flex items-center gap-2">            <flux:icon.user variant="mini" class="text-zinc-400" /> Member        </div>    </flux:option>    <flux:option>        <div class="flex items-center gap-2">            <flux:icon.eye variant="mini" class="text-zinc-400" /> Viewer        </div>    </flux:option></flux:select>
Log in to view

Searchable select

The searchable select variant makes navigating large option lists easier for your users.

Photography
Design services
Web development
Accounting
Legal services
Consulting
Other No results found 
<flux:select variant="listbox" searchable placeholder="Choose industries...">    <flux:option>Photography</flux:option>    <flux:option>Design services</flux:option>    <flux:option>Web development</flux:option>    <flux:option>Accounting</flux:option>    <flux:option>Legal services</flux:option>    <flux:option>Consulting</flux:option>    <flux:option>Other</flux:option></flux:select>
Log in to view

The search slot

If you need full control over the search field inside the listbox, you can use the search slot to render it yourself.
Copy to clipboard 
<flux:select variant="listbox" searchable>    <x-slot name="search">        <flux:select.search class="px-4" placeholder="Search industries..." />    </x-slot>    ...</flux:select>

Multiple select

Allow your users to select multiple options from a list of options.

Photography
Design services
Web development
Accounting
Legal services
Consulting
Other 
<flux:select variant="listbox" multiple placeholder="Choose industries...">    <flux:option>Photography</flux:option>    <flux:option>Design services</flux:option>    <flux:option>Web development</flux:option>    <flux:option>Accounting</flux:option>    <flux:option>Legal services</flux:option>    <flux:option>Consulting</flux:option>    <flux:option>Other</flux:option></flux:select>
Log in to view

Selected suffix

By default, when more than one option is selected, the suffix " selected" will be appended to the number of selected options. You can customize this language by passing a selected-suffix prop to the select component.
Copy to clipboard 
<flux:select variant="listbox" selected-suffix="industries selected" multiple>    ...</flux:select>
If you pass a custom suffix, and need localization, you can use the __() helper function to translate the suffix:
Copy to clipboard 
<flux:select variant="listbox" selected-suffix="{{ __('industries selected') }}" multiple>    ...</flux:select>

Checkbox indicator

If you prefer a checkbox indicator instead of the default checkmark icon, you can use the indicator="checkbox" prop.
Copy to clipboard 
<flux:select variant="listbox" indicator="checkbox" multiple>    ...</flux:select>

Clearing search

By default, a searchable select will clear the search input when the user selects an option. If you want to disable this behavior, you can use the clear="close" prop to only clear the search input when the user closes the select.
Copy to clipboard 
<flux:select variant="listbox" searchable multiple clear="close">    ...</flux:select>

Combobox

A versatile combobox that can be used for anything from basic autocomplete to complex multi-selects.

Photography
Design services
Web development
Accounting
Legal services
Consulting
Other No results found 
<flux:select variant="combobox" placeholder="Choose industry...">    <flux:option>Photography</flux:option>    <flux:option>Design services</flux:option>    <flux:option>Web development</flux:option>    <flux:option>Accounting</flux:option>    <flux:option>Legal services</flux:option>    <flux:option>Consulting</flux:option>    <flux:option>Other</flux:option></flux:select>
Log in to view

The input slot

If you need full control over the input element used to trigger the combobox, you can use the input slot to render it yourself.
Copy to clipboard 
<flux:select variant="combobox">    <x-slot name="input">        <flux:select.input x-model="search" :invalid="$errors->has('...')" />    </x-slot>    ...</flux:select>

Dynamic options

If you want to dynamically generate options on the server, you can use the :filter="false" prop to disable client-side filtering.

Copy to clipboard 
<flux:select :filter="false">    @foreach ($options as $option)        <flux:option value="{{ $option->value }}">            {{ $option->label }}        </flux:option>    @endforeach</flux:select>
Copyright © 2025 Wireable LLC ·Terms of Service
Built with by
Caleb Porzio and Hugo Sainte-Marie