Documentation v1.0.0

Choices Js Select

---
title: Choices Js Select
description: Choices.js library provides a modern, interactive replacement for standard HTML forms.
toc: true
---

### 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](https://choices-js.github.io/Choices/) 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.

```html
<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.

```html
<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.

<Example html={`<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>
`}
js={`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.

<Example overflowVisible="true" html={`<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>
`}
js={`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.

<Example overflowVisible="true" html={`<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>

`}
js={`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.

<Example overflowVisible="true" html={`<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" />
`}
js={`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.

<Example overflowVisible="true" html={`<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>`}
js={`document.addEventListener('DOMContentLoaded', function() {
    new Choices('#reset-simple');
    new Choices('#reset-multiple', {
        removeItemButton: true,
    });
});`}
/>

Choices.js library provides a modern, interactive replacement for standard HTML forms.

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.

Limited to 5 values with remove button Unique values only, no pasting Email Addresses Only Disabled Prepends and appends a value to each items return value Preset values passed through options I18N labels

Right-to-left

<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'
  });

});


                        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.

Default With remove button Option groups Right-to-left Use label in event (add/remove)

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


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

Default Option groups Right-to-left Options added via config with no search Option and option groups added via config Option selected via config with custom properties

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

Option searchable by custom properties via data-custom-properties attribute

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

Options without sorting

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


                        <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,
  });

});


                        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.

Large Multi Select Default Multi Select Small Multi Select Large Single Select Default Single Select Small Single Select Large Text Input Default Text Input Small Text Input

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


                        <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'
  });

});


                        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

Choices Js Select

Choices.js Library

Text Inputs Examples

Multiple Select Input Examples

Single Select Input Examples

Sizes

Form Interaction

Admin

Themes

Other