# choices-js/choices

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/choices-js-choices).**

6,801 stars · 630 forks · JavaScript · MIT

## Links

- GitHub: https://github.com/Choices-js/Choices
- Homepage: https://choices-js.github.io/Choices/
- awesome-repositories: https://awesome-repositories.com/repository/choices-js-choices.md

## Topics

`choice` `choices` `choicesjs` `dropdown-menus` `inputs` `javascript` `options` `select` `select-multiple` `select-one` `select2` `selectbox` `vanilla-js`

## Description

Choices is a vanilla JavaScript library used to create customizable select boxes and text inputs without external dependencies. It functions as a custom select box plugin that transforms standard HTML select elements into searchable, stylable dropdowns and tagged text input components.

The library distinguishes itself through a system of customizable HTML templates and CSS custom properties, allowing for the creation of tailored UI components. It provides the ability to define custom HTML structures for input components and modify the visual appearance of the interface via CSS theme styling.

The project covers a range of input control capabilities, including multi-select tag inputs, text-based option filtering, and programmatic state management. It supports the enforcement of input value constraints and the use of custom property search to locate specific items within data sets.

## Tags

### User Interface & Experience

- [Custom Select Box Plugins](https://awesome-repositories.com/f/user-interface-experience/custom-select-box-plugins.md) — Provides a lightweight, zero-dependency solution for creating customizable and searchable select boxes and text inputs.
- [Select Menus](https://awesome-repositories.com/f/user-interface-experience/select-menus.md) — Transforms standard HTML select boxes into searchable and stylable dropdown menus.
- [CSS Theme Authoring](https://awesome-repositories.com/f/user-interface-experience/appearance-customizations/css-theme-authoring.md) — Supports modifying the visual appearance of the interface through the authoring of CSS custom properties. ([source](https://cdn.jsdelivr.net/gh/choices-js/choices@main/README.md))
- [Control Template Customizations](https://awesome-repositories.com/f/user-interface-experience/control-template-customizations.md) — Allows redefining the internal visual structure of UI components via custom HTML templates. ([source](https://cdn.jsdelivr.net/gh/choices-js/choices@main/README.md))
- [CSS Variable Theming](https://awesome-repositories.com/f/user-interface-experience/css-variable-theming.md) — Implements a theming system that maps design tokens to native CSS variables for flexible component styling.
- [Customizable Inputs](https://awesome-repositories.com/f/user-interface-experience/form-input-components/customizable-inputs.md) — Offers a set of tools for building enhanced web form elements with deep visual and behavioral overrides.
- [HTML Markup Templates](https://awesome-repositories.com/f/user-interface-experience/html-markup-templates.md) — Utilizes customizable HTML string templates to generate the internal structure of input components.
- [Multi-Select Inputs](https://awesome-repositories.com/f/user-interface-experience/multi-select-inputs.md) — Provides input fields where users can select and manage multiple options as removable tags.
- [Select Inputs](https://awesome-repositories.com/f/user-interface-experience/multi-select-inputs/select-inputs.md) — Renders dropdown menus for picking options from grouped lists using customizable HTML templates. ([source](https://choices-js.github.io/Choices/))
- [Searchable Dropdowns](https://awesome-repositories.com/f/user-interface-experience/searchable-dropdowns.md) — Provides a user interface for filtering large lists of options through real-time search queries.
- [Select Dropdowns](https://awesome-repositories.com/f/user-interface-experience/select-dropdowns.md) — Provides a custom select box plugin that transforms standard HTML select elements into searchable, stylable dropdowns.
- [List Search Filters](https://awesome-repositories.com/f/user-interface-experience/selectable-lists/list-search-filters.md) — Provides real-time filtering mechanisms to narrow down long lists of selectable options using search queries.
- [Tag Inputs](https://awesome-repositories.com/f/user-interface-experience/tag-inputs.md) — Implements text fields that convert typed entries into distinct, removable tags with defined limits.
- [Text Filters](https://awesome-repositories.com/f/user-interface-experience/text-filters.md) — Filters available choices in a dropdown in real time based on user text input. ([source](https://cdn.jsdelivr.net/gh/choices-js/choices@main/README.md))
- [Custom UI Components](https://awesome-repositories.com/f/user-interface-experience/custom-ui-components.md) — Enables the design of highly tailored input elements using custom HTML templates and CSS for brand-specific styles.
- [Dynamic Input Forms](https://awesome-repositories.com/f/user-interface-experience/dynamic-input-forms.md) — Implements text fields that dynamically load options from an API and validate entries in real time.
- [Asynchronous Option Loading](https://awesome-repositories.com/f/user-interface-experience/dynamic-option-management/asynchronous-option-loading.md) — Provides the ability to fetch selectable list items from a remote API dynamically during user interaction. ([source](https://choices-js.github.io/Choices/))
- [Formatted Input Wrappers](https://awesome-repositories.com/f/user-interface-experience/formatted-input-wrappers.md) — Wraps native HTML input elements in a custom UI shell that synchronizes raw values with formatted display strings.
- [Input Validation Constraints](https://awesome-repositories.com/f/user-interface-experience/input-validation-constraints.md) — Restricts the number of selectable items and enforces specific text formats like email addresses. ([source](https://choices-js.github.io/Choices/))
- [Selection Item Management](https://awesome-repositories.com/f/user-interface-experience/multi-select-inputs/select-inputs/selection-item-management.md) — Provides tools to add, remove, or edit entries within a selection input using custom delimiters and item limits. ([source](https://cdn.jsdelivr.net/gh/choices-js/choices@main/README.md))

### Part of an Awesome List

- [Data Property Search](https://awesome-repositories.com/f/awesome-lists/security/vpn-as-a-service/data-property-search.md) — Enables locating specific items in a list by searching against custom data properties. ([source](https://choices-js.github.io/Choices/))

### DevOps & Infrastructure

- [Dropdown Configuration](https://awesome-repositories.com/f/devops-infrastructure/response-parsing-utilities/json-response-parsers/option-list-populations/dropdown-configuration.md) — Allows populating dropdowns with predefined or grouped options and applying sorting or limit rules. ([source](https://cdn.jsdelivr.net/gh/choices-js/choices@main/README.md))