Choose a single option from a dropdown list.
An alternative to the browser's native select element. Typically used when you need custom option styling like icons, images, and other treatments.
The searchable select variant makes navigating large option lists easier for your users.
Allow your users to select multiple options from a list of options.
A versatile combobox that can be used for anything from basic autocomplete to complex multi-selects.
If you want to dynamically generate options on the server, you can use the :filter="false" prop to disable client-side filtering.
|
Prop
|
Description
|
|---|---|
| wire:model |
Binds the select to a Livewire property. See the wire:model documentation for more information.
|
| name |
Name attribute for the select. Automatically set when using
wire:model . |
| placeholder |
Text displayed when no option is selected.
|
| label |
Label text displayed above the select. When provided, wraps the select in a
flux:field component with an adjacent flux:label component. See the field component. |
| description |
Help text displayed below the select. When provided alongside
label , appears between the label and select within the flux:field wrapper. See the field component. |
| description-trailing |
The description provided will be displayed below the select instead of above it.
|
| badge |
Badge text displayed at the end of the
flux:label component when the label prop is provided. |
| size |
Size of the select. Options:
sm , xs . |
| variant |
Visual style of the select. Options:
default (native select), listbox , combobox . |
| multiple |
Allows selecting multiple options (listbox and combobox variants only).
|
| filter |
If
false , disables client-side filtering. |
| searchable |
Adds a search input to filter options (listbox and combobox variants only).
|
| clearable |
Displays a clear button when an option is selected (listbox and combobox variants only).
|
| selected-suffix |
Text appended to the number of selected options in multiple mode (listbox variant only).
|
| clear |
When to clear the search input. Options:
select (default), close (listbox and combobox variants only). |
| disabled |
Prevents user interaction with the select.
|
| invalid |
Applies error styling to the select.
|
|
Slot
|
Description
|
|---|---|
| default |
The select options.
|
| trigger |
Custom trigger content. Typically the
select.button or select.input component (listbox and combobox variants only). |
|
Attribute
|
Description
|
|---|---|
| data-flux-select |
Applied to the root element for styling and identification.
|
|
Prop
|
Description
|
|---|---|
| value |
Value associated with the option.
|
| disabled |
Prevents selecting the option.
|
|
Slot
|
Description
|
|---|---|
| default |
The option content (can include icons, images, etc. in listbox variant).
|
|
Prop
|
Description
|
|---|---|
| placeholder |
Text displayed when no option is selected.
|
| invalid |
Applies error styling to the button.
|
| size |
Size of the button. Options:
sm , xs . |
| disabled |
Prevents selecting the option.
|
| clearable |
Displays a clear button when an option is selected.
|
|
Prop
|
Description
|
|---|---|
| placeholder |
Text displayed when no option is selected.
|
| invalid |
Applies error styling to the input.
|
| size |
Size of the input. Options:
sm , xs . |