Components
Layouts

Select

Choose a single option from a dropdown list.

For lists of up to 5 items, consider using checkboxes or radio buttons instead.

Small

A smaller select element for more compact layouts.

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

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

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

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

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

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

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

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

Dynamic options

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

Make sure you add the wire:key attribute to flux:option to ensure the options are properly tracked during Livewire updates.
Copyright © 2024 Wireable LLC ·Terms of Service
Built with by
Caleb Porzio and Hugo Sainte-Marie