Tailwind CSS Advanced Select
The Advanced Select Component goes beyond traditional select boxes, offering a suite of customizable options that cater to a wide range of user needs. With support for searching, tagging, and multiple other functionalities, it stands as a versatile choice for any application requiring advanced selection capabilities.
Requires JS
Note that this component requires the use of our Advanced Select plugin, else you can skip this message if you are already using Preline UI as a package.
Default advanced select
Use the default Advanced Select pattern for searchable, custom-styled single selection.
Grouped options New
Group related options under labeled sections while keeping the same searchable dropdown behavior.
Fixed-position dropdown
Keep the dropdown anchored independently when surrounding layout or scrolling would otherwise clip it.
Placeholder with icon
Add a custom placeholder and icon before the user chooses an option.
Allow empty selection
Let users clear the current selection and return the field to an empty state.
Multiple selection with optgroups New
Combine multiple selection with grouped option sections.
Multiple selection with option templates
Use custom option templates while allowing users to pick multiple values.
Multiple selection with counter
Show a selection counter instead of listing every chosen value in the trigger.
Multiple selection with conditional counter
Switch to a counter only after the number of selected values reaches a chosen threshold.
Counter with option templates
Combine a selection counter with custom option templates in multiple mode.
Searchable dropdown
Enable in-dropdown search with "hasSearch": true so users can filter options as they type.
Minimum search length
Require a minimum number of typed characters before search results begin filtering.
Scroll to selected option New
Automatically scroll to the selected option when the dropdown opens.
Search match mode
Choose how search matches option text, including hybrid matching across words and character sequences.
Search labels and descriptions
Search across both the option label and description, or disable description matching when needed.
Option template with icons
Use icons inside custom option templates to make choices easier to scan.
Option template with avatars
Build custom option templates with avatars and richer supporting content.
Option template with color indicators New
Add color indicators to option templates for status, labels, or palette-like selections.
Advanced select sizes
Scale the control from small to large sizes to match different form layouts.
Disabled advanced select
Disable the component and style the trigger so it reads clearly as inactive.
Inside a modal
Use Advanced Select inside a modal while keeping the dropdown interactive and correctly positioned.
Validation states
Use validation styles to communicate whether the current selection is valid.
Dynamic validation styling
Apply hs-success and hs-error classes dynamically to update validation styling in response to form state.
Add or remove options
Use the addOption and removeOption methods to update the available options at runtime.
Add or remove options in multiple mode
Use the same addOption and removeOption methods with multi-select fields.
Set a single value programmatically
Use the setValue method to set a selected value programmatically.
Set multiple values programmatically
Use the setValue method to update several selected values programmatically.
Option templates with remote data
Use custom option templates while loading options from a remote endpoint.
Conditional counter with remote data
Combine remote loading with multiple selection and a conditional counter.
Avatar template with remote data
Load avatar-based option templates from a remote endpoint.
Inside overflow-hidden containers
Requires Additional Installation
Note that this feature requires the use of the third-party Floating UI library.
Use "dropdownScope": "window" when the select lives inside a parent with overflow: hidden.
Destroy and reinitialize
Use the destroy method before reinitializing the component when the field needs to be rebuilt.