Advanced forms
Advanced select
The Advanced Select Component enhances traditional select boxes with features like search and tagging, offering versatility for complex selection needs.
Basic example
Default
A basic usage of advanced select.
Placeholder
To customize the placeholder with either an icon or plain text, you can provide custom HTML within the `"placeholder:"` option as demonstrated below.
Size
Advanced select sizes
Add responsive class `advance-select-{size}` where `{size} = xs|sm|md|lg|xl` for advance select of different sizes. The size is now determined by the element’s height instead of its padding.
Validation states
Success state
Success state can be show using `is-valid` class.
Error state
Error state can be show using `is-invalid` class.
Illustrations
Fixed position
To fix the dropdown's vertical placement, you can specify the `dropdownVerticalFixedPlacement:` option and define the desired position, as demonstrated in the example below.
Trigger Disabled
To render selects as inactive, include the disabled boolean attribute within the `select` element and utilize the class `select-disabled:*` within the `"toggleClasses":` section for styling purposes.
Multiple
Select multiple options.
Multiple with option template
Select multiple options and add an option template.
Multiple with counter
If you only want to display the number of the selected option in multiple select. then use `"toggleCountText":`.
Multiple with conditional counter
Use `multiple` tag to enable counter option that counts the number of selected options.
Search
To enable searching within the dropdown, set `"hasSearch": true`.
Search result limit
Set a maximum limit for search results by using the parameter `searchLimit: 5`.
Direct match searching Off
Set `isSearchDirectMatch: false` to turn off direct match searching, allowing for broader search results without exact term matching.
Tags
Create a custom select with removable tags using the provided options:
Custom option — Icon
Example of custom option with avatar and icons. Using `data-select-option` for providing content for the option.
Custom option — Avatar
Basic example of options with avatar.
Modal example
Basic usage in modal window.
Add/Remove option
Utilize the `addOption` and `removeOption` methods to <a href="#add-method" class="link link-primary">add</a> or <a href="#remove-method" class="link link-primary">remove</a> options, respectively.
Destroy/Reinitialize
The `destroy` <a href="#destroy-method" class="link link-primary">method</a> is provided to facilitate the destruction of a select element.
Set a single value with a setter.
Provides `setValue` <a href="#set-method" class="link link-primary">method</a> that helps to set a value programmatically.
Set a multiple value with a setter.
Provides `setValue` <a href="#set-method" class="link link-primary">method</a> that helps to set a value programmatically.
Remote data selection
Set `apiUrl: "https://some-path.com/api"` to configure selection based on remote data, allowing data to be fetched dynamically from the specified API endpoint.
Remote data selection (multiple options)
Allow multiple options to be selected by setting `apiUrl: "https://some-path.com/api"`, enabling dynamic selection from remote data provided by the specified API endpoint.
Remote data selection with removable tags
Enable selection with removable tags using `apiUrl: "https://some-path.com/api"`, allowing choices to be dynamically loaded from remote data and displayed as tags.
Multiple selection with option template (remote data)
Enable multiple option selection with a custom template by setting `apiUrl: "https://some-path.com/api"`. This allows selections to be dynamically built from remote data with a specified option format.
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)
Create a custom selection design featuring avatars by setting `apiUrl: "https://some-path.com/api"`. This enables options to be dynamically loaded from remote data and displayed with personalized avatar styling..
Modal example with overflow:hidden
Warning: Please note that the demos below use the third-party library: <a href="https://floating-ui.com/" class="link link-warning" target="_blank">Floating UI</a>.
JavaScript behavior
Methods — Method usage
The `HSSelect` object is contained within the global `window` object.
JavaScript
const { element } = HSSelect.getInstance('#method-select', true);
const openBtn = document.querySelector('#open-btn');
openBtn.addEventListener('click', () => {
element.open();
});Events — Event usage
METHOD| DESCRIPTION | RETURNING VALUE `on:change`| Called when any select is changed. | Current value
JavaScript
const el = HSSelect.getInstance(document.getElementById('event-select'));
el.on('change', (instance) => {console.log("selected")});Class referenceThe component, style, color, state, size and modifier classes available for this component.
| Class | Type | Description |
|---|---|---|
advance-select-toggle | modifier | The `advance-select-toggle` component class is used for `:toggleClasses`, providing base styles to select toggle. |
advance-select-menu | modifier | The `advance-select-menu` component class is used for `:dropdownClasses`, providing base styles to select dropdown menu. |
advance-select-option | modifier | The `advance-select-option` component class is used for `:optionClasses`, providing base styles for individual select dropdown options. |
advance-select-tag | modifier | The `advance-select-tag` component class is utilized for `wrapperClasses` when `:mode` is configured as tag. |
select-active | state | apply active state to advance-select-option. |
select-opened:{tw-utility-class} | variant | The modifier allows setting Tailwind classes when a select has been opened. |
select-disabled:{tw-utility-class} | variant | The modifier allows setting Tailwind classes when a select has the `disabled` attribute. |
selected:{tw-utility-class} | variant | The modifier allows setting Tailwind classes when a option is selected. |
advance-select-xs | size | Apply `advance-select-xs` along with `advance-select-toggle` to implement a extra small size. |
advance-select-sm | size | Apply `advance-select-sm` along with `advance-select-toggle` to implement a small size. |
advance-select-md | size | Apply `advance-select-md` along with `advance-select-toggle` to implement a medium(defautl) size. |
advance-select-lg | size | Apply `advance-select-lg` along with `advance-select-toggle` to implement a large size. |
advance-select-xl | size | Apply `advance-select-xl` along with `advance-select-toggle` to implement a extra large size. |