Advance Select

Advance select inputs with search and multi-select capabilities.

How to use

1. Install choices.js

npm install choices.js

2. Import CSS

Import styles after importing Tailwind and Hummingbird CSS:

@import '@hummingbirdui/hummingbird/src/plugins/choices.css';

3. Initialization

Basic initialization example with remove item button enabled:

const element = document.querySelector('[data-choices="data-choices"]');
const choices = new Choices(element, { removeItemButton: true });

For more options and configuration guidance, refer to the Choices.js documentation.

Text Input

Text input with Choices.js. Functionality can be extended using Choices.js options.

HTML

<input type="text" class='form-control' id="name" name="name" data-choices="data-choices" />

Multiple select input

Select input with multiple selection enabled by adding multiple attribute.

HTML

<select class="form-select-fill" aria-label="Outlined example with label" data-choices="data-choices" multiple>
  <option value="">Select organizer...</option>
  <option>Massachusetts Institute of Technology</option>
  <option>University of Chicago</option>
  <option>GSAS Open Labs At Harvard</option>
  <option>California Institute of Technology</option>
</select>

Single select input

Select single value by adding select-one attribute.

HTML

<select class="form-select" aria-label="Outlined example with label" data-choices="data-choices" select-one>
  <option value="">Select organizer...</option>
  <option>Massachusetts Institute of Technology</option>
  <option>University of Chicago</option>
  <option>GSAS Open Labs At Harvard</option>
  <option>California Institute of Technology</option>
</select>

Sizes

Set heights using classes like .form-control-sm and .form-control-lg for small and large input fields. Default is medium.

HTML

<select class="form-select form-select-sm" aria-label="Outlined example with label" data-choices="data-choices" select-one>
  <option value="">Select option</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
</select>
<select class="form-select" aria-label="Outlined example with label" data-choices="data-choices" select-one>
  <option value="">Select option</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
</select>
<select class="form-select form-select-lg" aria-label="Outlined example with label" data-choices="data-choices" select-one>
  <option value="">Select option</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
</select>

Floating Labels

Advance select can also be used with floating labels.

HTML

<div class="form-floating form-field">
  <select class="form-select" aria-label="Filled floating label example" data-choices="data-choices" multiple>
    <option value="">Select option</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
  <label class="form-label" for="floatingInput">Options</label>
</div>
<div class="form-floating form-field">
  <select class="form-select-fill" aria-label="Filled floating label example" data-choices="data-choices" multiple>
    <option value="">Select option</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>
  <label class="form-label" for="floatingInput">Options</label>
</div>

Disabled

HTML

<select class="form-select" aria-label="Outlined example with label" data-choices="data-choices" multiple disabled>
  <option value="">Select</option>
  <option selected>preset-1</option>
  <option>preset-2</option>
  <option>preset-3</option>
  <option>preset-4</option>
</select>
<select class="form-select-fill" aria-label="Outlined example with label" data-choices="data-choices" multiple disabled>
  <option value="">Select</option>
  <option selected>preset-1</option>
  <option>preset-2</option>
  <option>preset-3</option>
  <option>preset-4</option>
</select>

Validation

HTML

<select class="form-select is-valid" aria-label="Outlined example with label" data-choices="data-choices" multiple>
  <option value="">Select</option>
  <option>preset-1</option>
  <option>preset-2</option>
  <option>preset-3</option>
  <option>preset-4</option>
</select>
<select class="form-select-fill is-valid" aria-label="Outlined example with label" data-choices="data-choices" multiple>
  <option value="">Select</option>
  <option>preset-1</option>
  <option>preset-2</option>
  <option>preset-3</option>
  <option>preset-4</option>
</select>
<select class="form-select is-invalid" aria-label="Outlined example with label" data-choices="data-choices" multiple>
  <option value="">Select</option>
  <option>preset-1</option>
  <option>preset-2</option>
  <option>preset-3</option>
  <option>preset-4</option>
</select>
<select class="form-select-fill is-invalid" aria-label="Outlined example with label" data-choices="data-choices" multiple>
  <option value="">Select</option>
  <option>preset-1</option>
  <option>preset-2</option>
  <option>preset-3</option>
  <option>preset-4</option>
</select>