Components
Select
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.

Small

A smaller select element for more compact layouts.

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
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

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
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
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

Multiple select

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

Photography
Design services
Web development
Accounting
Legal services
Consulting
Other
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
If you pass a custom suffix, and need localization, you can use the
__()
helper function to translate the suffix:
Copy to clipboard

Checkbox indicator

If you prefer a checkbox indicator instead of the default checkmark icon, you can use the
indicator="checkbox"
prop.
Copy to clipboard

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

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
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

Dynamic options

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

Copyright © 2025 Wireable LLC ·Terms of Service
Built with by
Caleb Porzio and Hugo Sainte-Marie