Chosen v3.0.4

Vanilla JavaScript edition

Tame unwieldy select boxes.

Chosen makes long select boxes easier to use while preserving the native form control underneath.

Download Chosen Explore the API Contribute on GitHub
Try an example above.

Adapter quick tests

  1. Single select: search ops-42, choose Operations, then clear it.
  2. Multiple select: search zzzz to see Other remain visible, then type New skill and press Enter to create it.
  3. Groups and limits: clear the search, choose Design, then try a fourth skill. The event log reports the limit.
  4. Floating dropdown: open Season, then scroll the page while its wider list is open.

Single select

Search for “ops-42” to find Operations by value. Choose a project, then clear or reset it. The original select submits the value.

Multiple select and groups

Search the groups, click a group heading to select its available skills, or type a new skill and choose “Add skill”. “Other” remains visible during search. Select up to three items or paste “Research, Testing”. Click a selected result or press Enter on it to remove it; Backspace removes the last chip. This example also selects the highlighted result with Tab, then moves focus onward.

Search-free single select

Open the wider floating list and type “w” to highlight Winter. This example uses a 12rem control, an independently sized fixed dropdown, and data-disable-search-threshold="5" on the original select.

Latest events

Try a control above.

Use it in your project

The native edition is experimental. It does not load jQuery, Prototype, or React. The original select remains the source of submitted values; call update() after changing its options, or dispatch a native chosen:updated event.

import { Chosen } from 'chosen-jjj/native';
import 'chosen-jjj/native/styles.css';

const chosen = new Chosen(document.querySelector('#native-project'), {
  allow_single_deselect: true
});
chosen.update();
chosen.destroy();