Advanced Select

Advanced 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" 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

Advanced 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>

Customization

CSS Variables

Advanced select component inherits styles from form-control and form-select classes. Any CSS variables defined for these classes can be overridden to customize the appearance of the advanced select component. Follow the form control and select documentation for available CSS variables.

Choices.js Classes

Customization also can be done via overriding Choices.js default classes.

Previous

Validation
Next

Date Time Picker