Chosen v3.0.4

React 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

Adapter quick tests

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

Use it in your project

The React edition is currently experimental. It needs React 18 or newer and does not load jQuery or Prototype. Import its CSS separately, then customize the same --chosen-* tokens used by classic Chosen.

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

<Chosen name="fruit" options={options} defaultValue="apple" />

See the React guide for controlled and uncontrolled values, accessibility, server rendering, and the Tailwind recipe.