1. Components
  2. 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.

Learn more

Basic usage

A basic usage of advanced select.

Fixed position

Fixed dropdown position.

Placeholder

Use custom placeholder with icon.

Multiple

Select multiple options.

Multiple with option template

Select multiple options and add an option template.

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.

Search inside dropdown

Use "hasSearch": true to enable search inside dropdown.

Minimum search length New

Use "minSearchLength": 3 to set the minimum search length.

Search limit

Use "searchLimit": 5 for the limit search results.

Direct match searching Off

Use "isSearchDirectMatch": false to disable direct match searching.

Tags

Custom template with removable tags.

Tags (disabled)

Custom template with removable tags.

Custom template with icons

Build your custom design.

Custom template with avatars

Build your custom design.

Sizing

Selects stacked small to large sizes.

Disabled

Make selects look inactive by adding the disabled boolean attribute to <select> element and use "toggleClasses": "hs-select-disabled:*" class to style it.

Basic usage in modal window.

Validation states

Provides valuable, actionable feedback to your users with HTML5 form validation.

Please select a valid state.

Looks good!

Dynamic validation states

Use hs-success and hs-error for dynamic validation state styles.

Add/Remove Options

Use addOption and removeOption methods to add/remove options.

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 New

Use "apiUrl": "https://some-path.com/api" to enable build select according to the remote data.

Remote data (multiple) New

Select multiple options. Use "apiUrl": "https://some-path.com/api" to enable build select according to the remote data.

Remote data (tags) New

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

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

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

Build your custom design. Use "apiUrl": "https://some-path.com/api" to enable build select according to the remote data.

Requires Additional Installation

Note that this feature requires the use of the third-party Floating UI library.

Learn more

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.