Select

Customize the native `<select>`s with custom CSS that changes the element’s initial appearance.

Default

Custom <select> menus need only a custom class, .form-select to trigger the custom styles. Custom styles are limited to the <select>’s initial appearance and cannot modify the <option>s due to browser limitations. 

<select class="form-select" aria-label="Default select example">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Sizing

You may also choose from small and large custom selects to match our similarly sized text inputs.

Below are examples for all available sizes: extra-small, small, default, large, and extra-large. Use the corresponding utility class to change the control's height. 

<div class="d-block mb-3">
<label class="form-label">Extra small</label>
<select class="form-select form-select-xs mb-2" aria-label="Extra small select example">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

<label class="form-label">Small</label>
<select class="form-select form-select-sm mb-2" aria-label="Small select example">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>

<label class="form-label">Default</label>
<select class="form-select mb-2" aria-label="Default select example">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>

<label class="form-label">Large</label>
<select class="form-select form-select-lg mb-2" aria-label="Large select example">
<option selected>Open this select menu</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>

  <label class="form-label">Extra large</label>
  <select class="form-select form-select-xl" aria-label="Extra large select example">
    <option selected>Open this select menu</option>
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
  </select>

</div>

The multiple attribute is also supported:

<select class="form-select" multiple aria-label="Multiple select example">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

As is the size attribute:

<select class="form-select" size="3" aria-label="Size 3 select example">
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Disabled

Add the disabled boolean attribute on a select to give it a grayed out appearance and remove pointer events. 

<select class="form-select" aria-label="Disabled select example" disabled>
  <option selected>Open this select menu</option>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
</select>

Option Groups

<select class="form-select" placeholder="Select time zone...">
<option value="">Select time zone...</option>
<optgroup label="Africa">
  <option value="WAT">West Africa Time (WAT) – UTC+1</option>
  <option value="CAT">Central Africa Time (CAT) – UTC+2</option>
  <option value="EAT">East Africa Time (EAT) – UTC+3</option>
</optgroup>

<optgroup label="Asia">
<option value="IST">Indian Standard Time (IST) – UTC+5:30</option>
<option value="CST">China Standard Time (CST) – UTC+8</option>
<option value="JST">Japan Standard Time (JST) – UTC+9</option>
<option value="AFT">Afghanistan Time (AFT) – UTC+4:30</option>
<option value="BST">Bangladesh Standard Time (BST) – UTC+6</option>
<option value="BTT">Bhutan Time (BTT) – UTC+6</option>
<option value="HKT">Hong Kong Time (HKT) – UTC+8</option>
<option value="SGT">Singapore Time (SGT) – UTC+8</option>
<option value="GST">Gulf Standard Time (GST) – UTC+4</option>
</optgroup>

<optgroup label="Europe">
<option value="WET">Western European Time (WET) – UTC+0</option>
<option value="CET">Central European Time (CET) – UTC+1</option>
<option value="EET">Eastern European Time (EET) – UTC+2</option>
<option value="MSK">Moscow Standard Time (MSK) – UTC+3</option>
</optgroup>

<optgroup label="North America">
<option value="EST">Eastern Standard Time (EST) – UTC−5</option>
<option value="CST">Central Standard Time (CST) – UTC−6</option>
<option value="MST">Mountain Standard Time (MST) – UTC−7</option>
<option value="PST">Pacific Standard Time (PST) – UTC−8</option>
</optgroup>

<optgroup label="South America">
<option value="ART">Argentina Time (ART) – UTC−3</option>
<option value="PET">Peru Time (PET) – UTC−5</option>
<option value="CLT">Chile Standard Time (CLT) – UTC−4</option>
</optgroup>

<optgroup label="Oceania">
<option value="AEST">Australian Eastern Standard Time (AEST) – UTC+10</option>
<option value="ACST">Australian Central Standard Time (ACST) – UTC+9:30</option>
<option value="AWST">Australian Western Standard Time (AWST) – UTC+8</option>
<option value="NZST">New Zealand Standard Time (NZST) – UTC+12</option>
</optgroup>

<optgroup label="Antarctica">
  <option value="Troll">Troll Station Time – UTC+2</option>
  <option value="Palmer">Palmer Station Time – UTC−3</option>
  <option value="McMurdo">McMurdo Station Time – UTC+12</option>
</optgroup>
</select>

Form Validation

The examples demonstrate required fields, how browser default messages behave, and how to apply Bootstrap's custom validation classes.

Browser defaults

The example below uses the native required attribute to show the default validation UI and behavior. 

<form>
<select id="select-person" class="form-select" required>
  <option value="" disabled selected>Select a person...</option>
  <option value="4">Thomas Edison</option>
  <option value="1">Nikola</option>
  <option value="3">Nikola Tesla</option>
  <option value="5">Arnold Schwarzenegger</option>
</select>

<div class="py-3">
  <button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>

Bootstrap

Bootstrap's validation styles (e.g., .was-validated and .invalid-feedback) can be utilized for form validation. The example demonstrates adding .was-validated to the form to display Bootstrap's custom validation feedback for the enhanced select.

Please select a person
<form id="bootstrap-form" novalidate>
<select class="form-select" id="select-bootstrap" required placeholder="Select a person..." name="beast">
  <option value="" disabled selected>Select a person...</option>
  <option value="4">Thomas Edison</option>
  <option value="1">Nikola</option>
  <option value="3">Nikola Tesla</option>
  <option value="5">Arnold Schwarzenegger</option>
</select>
<div class="invalid-feedback">
  Please select a person
</div>
<div class="py-3">
  <button type="submit" class="btn btn-primary">Submit</button>
</div>
</form>
document.addEventListener('DOMContentLoaded', function () {
// Example starter JavaScript for disabling form submissions if there are invalid fields
var form = document.getElementById('bootstrap-form')
form.addEventListener('submit', function (event){

  // add was-validated to display custom colors
  form.classList.add('was-validated')

  if (!form.checkValidity()) {
    event.preventDefault()
    event.stopPropagation()
  }

}, false)
});

Choices.js Library

A choices component provides a modern, interactive replacement for standard HTML forms, allowing users to select or input values with enhanced search, tagging, and multi-select capabilities.

Choices.js is a lightweight, dependency-free JavaScript library that upgrades native <select> and <input type="text"> elements into clean, searchable, and highly customizable UI components. It offers features like tagging, filtering, and full internationalization (I18N) support.

To implement Choices.js, you only need to include the following two links in your HTML file.

Place the stylesheet link inside the <head> tag to load the necessary styling.

<link href="https://cdn.jsdelivr.net/npm/choices.js/public/assets/styles/choices.min.css" rel="stylesheet" />

Place this script tag just before the closing </body> tag to load the library's functionality. 

<script src="https://cdn.jsdelivr.net/npm/choices.js/public/assets/scripts/choices.min.js"></script>

Below are several examples showcasing the capabilities of choices components.

Text Inputs Examples

A collection of examples showcasing text inputs.

<label for="choices-limited" class="form-label">Limited to 5 values with remove button</label>
<input type="text" id="choices-limited" value="preset-1,preset-2" />

<label for="choices-unique" class="form-label">
Unique values only, no pasting
</label>
<input type="text" id="choices-unique" value="preset-1,preset-2" />

<label for="choices-emails" class="form-label">
Email Addresses Only
</label>
<input type="text" id="choices-emails" />

<label for="choices-disabled" class="form-label">
Disabled
</label>
<input type="text" id="choices-disabled" value="josh@joshuajohnson.co.uk,joe@bloggs.co.uk" disabled />

<label for="choices-prepend-append" class="form-label">
Prepends and appends a value to each items return value
</label>
<input type="text" id="choices-prepend-append" />

<label for="choices-options-preset" class="form-label">
Preset values passed through options
</label>
<input type="text" id="choices-options-preset" placeholder="This is a placeholder" />

<label for="choices-i18n" class="form-label">
I18N labels
</label>
<input type="text" id="choices-i18n" />

<div dir="rtl">
  <label for="choices-rtl" class="form-label">Right-to-left</label>
  <input type="text" id="choices-rtl" value="Value 1,Value 2" />
</div>

document.addEventListener('DOMContentLoaded', function() {
  new Choices('#choices-limited', {
      removeItemButton: true,
      maxItemCount: 5,
      placeholder: true,
      placeholderValue: 'Type and hit enter'
  });

  new Choices('#choices-unique', {
      duplicateItemsAllowed: false,
      paste: false,
      placeholder: true,
      placeholderValue: 'Type and hit enter'
  });

  new Choices('#choices-emails', {
      // This regex checks for a basic email format
      regex: /^(([^<>()[]\.,;:s@"]+(.[^<>()[]\.,;:s@"]+)*)|(".+"))@(([[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}.[0-9]{1,3}])|(([a-zA-Z-0-9]+.)+[a-zA-Z]{2,}))$/,
      maxItemCount: 10,
      placeholder: true,
      placeholderValue: 'Enter valid email addresses',
      customAddItemText: 'Only values matching specific conditions can be added'
  });

  // Initialization will respect the 'disabled' attribute on the input
  new Choices('#choices-disabled', {
      // The component will load with items but will be unclickable/untypeable
  });

  new Choices('#choices-prepend-append', {
      prependValue: 'ID-',
      appendValue: '-X',
  });

  new Choices('#choices-options-preset', {
      items: [
          "Josh Johnson",
          "Joe Bloggs",
          "Michael Smith"
      ],
  });

  new Choices('#choices-i18n', {
      paste: false,
      duplicateItemsAllowed: false,
      editItems: true,
      maxItemCount: 5,
      addItemText: function (value) {
          return 'Appuyez sur Entrée pour ajouter "' + String(value) + '"';
      },
      maxItemText: function (maxItemCount) {
          return String(maxItemCount) + " valeurs peuvent être ajoutées";
      },
      uniqueItemText: "Cette valeur est déjà présente",
  });

  new Choices('#choices-rtl', {
      // Enables Right-to-Left mode
      rtl: true,
      placeholder: true,
      placeholderValue: 'This is a placeholder set in the config'
  });

});

Multiple Select Input Examples

A collection of examples showcasing various multi-select component configurations.

<label for="choices-multiple-default">Default</label>
<select class="form-control" data-trigger name="choices-multiple-default" id="choices-multiple-default" placeholder="This is a placeholder" multiple>
  <option value="Choice 1" selected>Choice 1</option>
  <option value="Choice 2">Choice 2</option>
  <option value="Choice 3">Choice 3</option>
  <option value="Choice 4" disabled>Choice 4</option>
</select>

<label for="choices-multiple-remove-button">With remove button</label>
<select
class="form-control"
name="choices-multiple-remove-button"
id="choices-multiple-remove-button"
placeholder="This is a placeholder"
multiple
>
<option value="Choice 1" selected>
  Choice 1
</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
<option value="Choice 4">Choice 4</option>
</select>

<label for="multiple-option-groups">Option groups</label>
<select
class="form-control"
name="multiple-option-groups"
id="multiple-option-groups"
placeholder="This is a placeholder"
multiple
>
<option value="">Choose a city</option>
<optgroup label="FR">
  <option value="Paris">Paris</option>
  <option value="Nice">Nice</option>
  <option value="Toulouse">Toulouse</option>
</optgroup>
<optgroup label="UK">
  <option value="Edinburgh">Edinburgh</option>
  <option value="Bristol">Bristol</option>
  <option value="London">London</option>
</optgroup>
<optgroup label="US">
  <option value="Los Angeles" disabled>
    Los Angeles
  </option>
  <option value="Seattle">Seattle</option>
  <option value="Miami">Miami</option>
</optgroup>
<optgroup label="DE">
  <option value="Frankfurt">Frankfurt</option>
  <option value="Cologne">Cologne</option>
  <option value="Munich">Munich</option>
</optgroup>
<optgroup label="IT">
  <option value="Rome">Rome</option>
  <option value="Milan">Milan</option>
  <option value="Venice">Venice</option>
</optgroup>
<optgroup label="AU">
  <option value="Sydney">Sydney</option>
  <option value="Melbourne">Melbourne</option>
  <option value="Perth">Perth</option>
</optgroup>
</select>

<label for="multiple-choices-rtl">Right-to-left</label>
<select
class="form-control"
data-trigger
name="multiple-choices-rtl"
id="multiple-choices-rtl"
placeholder="This is a placeholder"
multiple
dir="rtl"
>
<option value="Choice 1" selected>
  Choice 1
</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
<option value="Choice 4" disabled>
  Choice 4
</option>
</select>

<label for="choices-multiple-labels">Use label in event (add/remove)</label>
<p id="message"></p>
<select id="choices-multiple-labels" multiple></select>

document.addEventListener('DOMContentLoaded', function() {
  new Choices('#choices-multiple-default', {
      placeholder: true,
      placeholderValue: 'This is a placeholder set in the config'
  });

  new Choices('#choices-multiple-remove-button', {
      removeItemButton: true,
  });

  new Choices('#multiple-option-groups', {
      removeItemButton: true,
  });

  new Choices('#multiple-choices-rtl', {
      rtl: true,
      placeholder: true,
      placeholderValue: "This is a placeholder set in the config",
  });

  var choicesSelect = new Choices('#choices-multiple-labels', {
      removeItemButton: true,
      choices: [
          { value: "One", label: "Label One" },
          { value: "Two", label: "Label Two", disabled: true },
          { value: "Three", label: "Label Three" },
      ],
  });
  choicesSelect.setChoices(
      [
          { value: "Four", label: "Label Four", disabled: true },
          { value: "Five", label: "Label Five" },
          { value: "Six", label: "Label Six", selected: true }, // This option will be pre-selected
      ],
      'value',
      'label',
      false
  );

});

Single Select Input Examples

A collection of examples showcasing various single select component configurations.

Try searching for 'fantastic', "Label 3" should display

Try searching for 'fantastic', "Label 3" should display 

<label for="single-select-default">Default</label>
<select class="form-control" data-trigger name="single-select-default" id="single-select-default" placeholder="This is a search placeholder">
  <option value="">This is a placeholder</option>
  <option value="Choice 1">Choice 1</option>
  <option value="Choice 2">Choice 2</option>
  <option value="Choice 3">Choice 3</option>
</select>

<label for="choices-single-groups">Option groups</label>
<select class="form-control" data-trigger name="choices-single-groups" id="choices-single-groups">
<option value="">Choose a city</option>
<optgroup label="FR">
  <option value="Paris">Paris</option>
  <option value="Nice">Nice</option>
  <option value="Toulouse">Toulouse</option>
</optgroup>
<optgroup label="UK">
  <option value="Edinburgh">Edinburgh</option>
  <option value="Bristol">Bristol</option>
  <option value="London">London</option>
</optgroup>
<optgroup label="US">
  <option value="Los Angeles" disabled>
    Los Angeles
  </option>
  <option value="Seattle">Seattle</option>
  <option value="Miami">Miami</option>
</optgroup>
<optgroup label="DE">
  <option value="Frankfurt">Frankfurt</option>
  <option value="Cologne">Cologne</option>
  <option value="Munich">Munich</option>
</optgroup>
<optgroup label="IT">
  <option value="Rome">Rome</option>
  <option value="Milan">Milan</option>
  <option value="Venice">Venice</option>
</optgroup>
<optgroup label="AU">
  <option value="Sydney">Sydney</option>
  <option value="Melbourne">Melbourne</option>
  <option value="Perth">Perth</option>
</optgroup>
</select>

<label for="choices-single-rtl">Right-to-left</label>
<select class="form-control" data-trigger name="choices-single-rtl" id="choices-single-rtl" dir="rtl">
<option value="Choice 1 selected">Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
</select>

<label for="choices-single-no-search">Options added via config with no search</label>
<select class="form-control" name="choices-single-no-search" id="choices-single-no-search">
<option value="0">Zero</option>
</select>

<label for="choices-single-preset-options">Option and option groups added via config</label>
<select class="form-control" name="choices-single-preset-options" id="choices-single-preset-options"></select>

<label for="choices-single-selected-option">Option selected via config with custom properties</label>
<p>
<small>Try searching for 'fantastic', "Label 3" should display</small>
</p>
<select class="form-control" name="choices-single-selected-option" id="choices-single-selected-option"></select>

<label for="choices-with-custom-props-via-html">
Option searchable by custom properties via <code>data-custom-properties</code> attribute
</label>
<p>
<small>Try searching for 'fantastic', "Label 3" should display</small>
</p>
<select class="form-control" id="choices-with-custom-props-via-html">
<option value="Dropdown item 1">Label One</option>
<option value="Dropdown item 2" selected disabled>
  Label Two
</option>
<option value="Dropdown item 3" data-custom-properties="This option is fantastic">
  Label Three
</option>
</select>

<label for="choices-single-no-sorting">Options without sorting</label>
<select class="form-control" name="choices-single-no-sorting" id="choices-single-no-sorting">
<option value="Tokyo">Tokyo</option>
<option value="Osaka">Osaka</option>
<option value="Kyoto">Kyoto</option>
<option value="Sydney">Sydney</option>
<option value="Melbourne">Melbourne</option>
<option value="Perth">Perth</option>
<option value="Rio de Janeiro">Rio de Janeiro</option>
<option value="Sao Paulo" disabled>
  Sao Paulo
</option>
<option value="Salvador">Salvador</option>
<option value="Cairo">Cairo</option>
<option value="Giza">Giza</option>
<option value="Capetown">Cape Town</option>
<option value="Johannesburg">Johannesburg</option>
<option value="Durban">Durban</option>
<option value="New Delhi">New Delhi</option>
<option value="Mumbai" disabled>
  Mumbai
</option>
<option value="Bangalore">Bangalore</option>
<option value="Dubai">Dubai</option>
</select>


document.addEventListener('DOMContentLoaded', function() {
new Choices('#single-select-default', {
placeholder: true,
placeholderValue: 'This is a placeholder set in the config',
searchPlaceholderValue: 'This is a search placeholder'
});

  new Choices('#choices-single-groups', {
      placeholder: true,
      placeholderValue: 'This is a placeholder set in the config',
      searchPlaceholderValue: 'This is a search placeholder'
  });

  new Choices('#choices-single-rtl', {
      rtl: true,
      searchPlaceholderValue: 'This is a search placeholder'
  });

  var choicesSingleNoSearch = new Choices('#choices-single-no-search', {
      searchEnabled: false,
      removeItemButton: true,
      choices: [
          { value: "One", label: "Label One" },
          { value: "Two", label: "Label Two", disabled: true },
          { value: "Three", label: "Label Three" },
      ],
  });
  choicesSingleNoSearch.setChoices(
      [
          { value: "Four", label: "Label Four", disabled: true },
          { value: "Five", label: "Label Five" },
          { value: "Six", label: "Label Six", selected: true },
      ],
      "value",
      "label",
      false
  );

  new Choices('#choices-single-preset-options', {
      searchPlaceholderValue: 'This is a search placeholder'
  }).setChoices(
      [
          {
              label: "Group one",
              id: 1,
              disabled: false,
              choices: [
              { value: "Child One", label: "Child One", selected: true },
              { value: "Child Two", label: "Child Two", disabled: true },
              { value: "Child Three", label: "Child Three" },
              ],
          },
          {
              label: "Group two",
              id: 2,
              disabled: false,
              choices: [
              { value: "Child Four", label: "Child Four", disabled: true },
              { value: "Child Five", label: "Child Five" },
              { value: "Child Six", label: "Child Six" },
              ],
          },
      ],
      "value",
      "label"
  );

  new Choices('#choices-single-selected-option', {
      searchPlaceholderValue: 'This is a search placeholder',
      searchFields: ["label", "value", "customProperties.description"],
      choices: [
          { value: "One", label: "Label One", selected: true },
          { value: "Two", label: "Label Two", disabled: true },
          {
              value: "Three",
              label: "Label Three",
              customProperties: {
              description: "This option is fantastic",
              },
          },
      ],
  }).setChoiceByValue("Two");

  new Choices('#choices-with-custom-props-via-html', {
      searchPlaceholderValue: 'This is a search placeholder',
      searchFields: ["label", "value", "customProperties"]
  });

  new Choices('#choices-single-no-sorting', {
      shouldSort: false,
  });

});

Sizes

This example demonstrates how to apply different sizing options—large, default, and small.

<label for="multi-select-lg">Large Multi Select</label>
<select class="form-control" data-trigger name="multi-select-lg" id="multi-select-lg" placeholder="This is a placeholder" multiple>
  <option value="Choice 1" selected>Choice 1</option>
  <option value="Choice 2">Choice 2</option>
  <option value="Choice 3">Choice 3</option>
  <option value="Choice 4" disabled>Choice 4</option>
</select>

<label for="multi-select-regular">Default Multi Select</label>
<select
class="form-control"
data-trigger
name="multi-select-regular"
id="multi-select-regular"
placeholder="This is a placeholder"
multiple
>
<option value="Choice 1" selected>
  Choice 1
</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
<option value="Choice 4" disabled>
  Choice 4
</option>
</select>

<label for="multi-select-sm">Small Multi Select</label>
<select
class="form-control"
data-trigger
name="multi-select-sm"
id="multi-select-sm"
placeholder="This is a placeholder"
multiple
>
<option value="Choice 1" selected>
  Choice 1
</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
<option value="Choice 4" disabled>
  Choice 4
</option>
</select>

<label for="single-select-lg">Large Single Select</label>
<select
class="form-control"
data-trigger
name="single-select-lg"
id="single-select-lg"
placeholder="This is a search placeholder"
>
<option value="">This is a placeholder</option>
<option value="Choice 1">Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
</select>

<label for="single-select-regular">Default Single Select</label>
<select
class="form-control"
data-trigger
name="single-select-regular"
id="single-select-regular"
placeholder="This is a search placeholder"
>
<option value="">This is a placeholder</option>
<option value="Choice 1">Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
</select>

<label for="single-select-sm">Small Single Select</label>
<select
class="form-control"
data-trigger
name="single-select-sm"
id="single-select-sm"
placeholder="This is a search placeholder"
>
<option value="">This is a placeholder</option>
<option value="Choice 1">Choice 1</option>
<option value="Choice 2">Choice 2</option>
<option value="Choice 3">Choice 3</option>
</select>

<label for="choices-limited-lg" class="form-label">
Large Text Input
</label>
<input type="text" id="choices-limited-lg" value="preset-1,preset-2" />

<label for="choices-limited-regular" class="form-label">
Default Text Input
</label>
<input type="text" id="choices-limited-regular" value="preset-1,preset-2" />

<label for="choices-limited-sm" class="form-label">
Small Text Input
</label>
<input type="text" id="choices-limited-sm" value="preset-1,preset-2" />

document.addEventListener('DOMContentLoaded', function() {
  new Choices('#multi-select-lg', {
    classNames: {
      containerOuter: 'custom-choices-lg',
    },
    placeholder: true,
    placeholderValue: 'This is a placeholder set in the config'
  });

  new Choices('#multi-select-regular', {
    placeholder: true,
    placeholderValue: 'This is a placeholder set in the config'
  });

  new Choices('#multi-select-sm', {
    classNames: {
      containerOuter: 'custom-choices-sm',
    },
    placeholder: true,
    placeholderValue: 'This is a placeholder set in the config'
  });

  new Choices('#single-select-lg', {
    classNames: {
      containerOuter: 'custom-choices-lg',
    },
    placeholder: true,
    placeholderValue: 'This is a placeholder set in the config',
    searchPlaceholderValue: 'This is a search placeholder'
  });

  new Choices('#single-select-regular', {
      placeholder: true,
      placeholderValue: 'This is a placeholder set in the config',
      searchPlaceholderValue: 'This is a search placeholder'
  });

  new Choices('#single-select-sm', {
      classNames: {
        containerOuter: 'custom-choices-sm',
      },
      placeholder: true,
      placeholderValue: 'This is a placeholder set in the config',
      searchPlaceholderValue: 'This is a search placeholder'
  });

  new Choices('#choices-limited-lg', {
      classNames: {
        containerOuter: ['choices', 'custom-choices-lg'],
      },
      removeItemButton: true,
      maxItemCount: 5,
      placeholder: true,
      placeholderValue: 'Type and hit enter'
  });

  new Choices('#choices-limited-regular', {
      removeItemButton: true,
      maxItemCount: 5,
      placeholder: true,
      placeholderValue: 'Type and hit enter'
  });

  new Choices('#choices-limited-sm', {
      classNames: {
        containerOuter: ['choices', 'custom-choices-sm'],
      },
      removeItemButton: true,
      maxItemCount: 5,
      placeholder: true,
      placeholderValue: 'Type and hit enter'
  });

});

Form Interaction

In the below examples, a user can change the values and press reset to restore to initial state.

<form>
  <label for="reset-simple">Change me!</label>
  <select class="form-control" name="reset-simple" id="reset-simple">
      <option value="Option 1 selected">Option 1</option>
      <option value="Option 2">Option 2</option>
      <option value="Option 3">Option 3</option>
      <option value="Option 4">Option 4</option>
      <option value="Option 5">Option 5</option>
  </select>

  <label for="reset-multiple">And me!</label>
  <select class="form-control" name="reset-multiple" id="reset-multiple" multiple>
      <option value="Choice A" selected>Choice A</option>
      <option value="Choice B">Choice B</option>
      <option value="Choice C">Choice C</option>
      <option value="Choice D" disabled>Choice D</option>
  </select>
  <button class="btn btn-outline-secondary" type="reset">Reset</button>

</form>
document.addEventListener('DOMContentLoaded', function() {
  new Choices('#reset-simple');
  new Choices('#reset-multiple', {
      removeItemButton: true,
  });
});
On this page
Quick Links
Home Docs
Admin
Admin Dashboard Example
Themes
Website Example (Classic)
Website Example (Modern)
Dog Breeder 1 (Beagle)
Dog Breeder 2 (Golden Retriever)
Dog Breeder 3 (French Bulldog)
Dog Breeder 4 (Poodle)
Dog Breeder 5 (German Shepherd)
Dog Breeder 6 (Yorkshire Terrier)
Cat Breeder 1 (Persian)
Cat Breeder 2 (Siamese)
Cat Breeder 3 (Bengal)
Cat Breeder 4 (Abyssinian)
Cat Breeder 5 (Himalayan)
HOA 1
HOA 2
HOA 3
Real Estate 1
Real Estate 2
Other
AsteroBuilder
AsteroDigital
Paanstation