choices-js/choices

★ 6,782JavaScriptAudience · developerComplexity · 2/5Setup · easy

Mindmap

mindmap
  root((Choices.js))
    Features
      Searchable dropdown
      Multi-select tags
      Custom user values
      RTL text support
    Configuration
      Item limits
      Placeholder text
      CSS class names
      Sort options
    Integration
      npm or CDN
      No jQuery needed
      Works with forms
    API
      Add remove items
      Custom events
      HTML templates

mindmap root((Choices.js)) Features Searchable dropdown Multi-select tags Custom user values RTL text support Configuration Item limits Placeholder text CSS class names Sort options Integration npm or CDN No jQuery needed Works with forms API Add remove items Custom events HTML templates

Click or tap to explore — scroll the page freely

Things people build with this

USE CASE 1

Replace a plain HTML select element with a searchable, multi-select tag input that users can type to filter options.

USE CASE 2

Add a dropdown where users can type in custom values not already in the predefined list.

USE CASE 3

Style a select box consistently across all browsers by replacing the native element with a Choices.js widget.

USE CASE 4

Programmatically add, remove, or clear dropdown options in response to other user interactions on the page.

Tech stack

JavaScriptCSSFuse.js

Getting it running

Difficulty · easy Time to first run · 5min

In plain English

Choices.js is a JavaScript library that upgrades the default dropdown select boxes and text input fields that browsers provide. The standard HTML select element is limited: it looks different on every browser, cannot be styled easily, and has no built-in search. Choices.js replaces it with a custom-rendered widget that looks consistent, supports filtering by typing, and adds features like multi-select with removable tags, the ability to let users add their own options, and full control over the visual appearance through CSS. The library works without jQuery or any other framework, which keeps it small (around 20 kilobytes compressed). You point it at an existing select element or text input on the page and it takes over rendering from there. The original form element still exists underneath, so data submission and browser compatibility work the same way as before. The library also works with right-to-left text layouts. Configuration is done by passing an options object when initializing. There are options for limiting how many items a user can select, enabling or disabling search, controlling whether users can type in custom values that are not in the predefined list, setting placeholder text, sorting the displayed options, and customizing all the CSS class names the widget uses. The search functionality is powered by the Fuse.js fuzzy matching library, and its options can be passed through directly. Choices.js also exposes an API for controlling the widget from code. You can add, remove, disable, or clear items programmatically, and the widget fires events when selections change so other parts of the page can react. Custom HTML templates are supported for changing how individual options are rendered in the dropdown. Installation is available through npm, Yarn, or a CDN link. The README includes setup examples, a complete list of all configuration options, event names, and available methods. The full README is longer than what was shown.

Copy-paste prompts

Prompt 1

Initialize choices.js on a multi-select input so users can search, pick multiple items, and add their own custom tags.

Prompt 2

Write JavaScript to programmatically clear all selected items in a Choices.js dropdown when a reset button is clicked.

Prompt 3

Configure choices.js to limit selection to 3 items maximum and sort the displayed options alphabetically.

Prompt 4

Add an event listener to a Choices.js instance that fires an API call whenever the selected value changes.

Prompt 5

Set up choices.js with a remote data source by loading options dynamically from an API endpoint on search input.

Open on GitHub → Explain another repo

← choices-js on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.