- Components
- Advanced Select
Advanced Forms
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.
Fixed position
This example demonstrates how the dropdown remains fixed in position.
Multiple with counter
Use multiple tag to enable counter option that counts the number of selected options.
Multiple with conditional counter
Use multiple tag to enable counter option that counts the number of selected options.
Multiple with counter and option template
Use multiple tag to enable counter option that counts the number of selected options.
Scroll to Selected New
Use "scrollToSelected": true to automatically scroll to the selected option when the dropdown opens.
Direct match searching Off
Use "isSearchDirectMatch": false to disable direct match searching.
Search both value and description
By default, you can search by both the value and the description. You can disable searching inside the description by setting "preventSearchInsideDescription": true.
Custom template with icons
Create a select menu with a custom option template, such as using icons.
Custom template with avatars
Create your own custom template for select options with avatars and more.
Custom template with colored square indicators New
Customize option items by adding colored square indicators to fit your design needs.
Disabled
Make selects look inactive by adding the disabled boolean attribute to <select> element and use "toggleClasses": "hs-select-disabled:*" class to style it.
Validation states
Provides valuable, actionable feedback to your users with HTML5 form validation.
Dynamic validation states
Use hs-success and hs-error for dynamic validation state styles.
Add/Remove Options (multiple)
Use addOption and removeOption methods to add/remove options.
Set single value using setter
Provides setValue method that helps to set a value programmatically.
Set multiple values using setter
Provides setValue method that helps to set a value programmatically.
Remote data
Use "apiUrl": "https://some-path.com/api" to enable build select according to the remote data.
Remote data (multiple)
Select multiple options. Use "apiUrl": "https://some-path.com/api" to enable build select according to the remote data.
Remote data (tags)
Custom template with removable tags. Use "apiUrl": "https://some-path.com/api" to enable build select according to the remote data.
Multiple with option template (remote data)
Select multiple options and add an option template. Use "apiUrl": "https://some-path.com/api" to enable build select according to the remote data.
Multiple with conditional counter (remote data)
Use multiple tag to enable counter option that counts the number of selected options. Use "apiUrl": "https://some-path.com/api" to enable build select according to the remote data.
Custom template with avatars (remote data)
Build your custom design. Use "apiUrl": "https://some-path.com/api" to enable build select according to the remote data.
Modal example with overflow:hidden;
Requires Additional Installation
Note that this feature requires the use of the third-party Floating UI library.
Select that is inside the parent with hidden overflow. Use "dropdownScope": "window". to enable this feature.
Destroy/Reinitialize Select
Provides destroy method that helps to destroy a select.
