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.

Placeholder

Use custom placeholder with icon.

Multiple

Select multiple options.

Multiple with counter

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.

Tags

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.

Destroy/Reinitialize Select

Provides destroy method that helps to destroy a select.