React Edition

React edition

chosen-jjj/react is a native React component, not a wrapper around the jQuery or Prototype adapters. It keeps a native <select> for form submission and validation while rendering an accessible combobox and listbox. React 18 or newer is a peer dependency, and the React entry point does not load either legacy adapter.

Try the interactive React demo or read the full React guide.

Use it

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

const options = [
  { value: 'apple', label: 'Apple' },
  { label: 'Citrus', options: [
    { value: 'orange', label: 'Orange' },
    { value: 'lemon', label: 'Lemon', disabled: true },
  ] },
];

function FruitForm() {
  const [basket, setBasket] = useState(['apple']);
  return <form>
    <label htmlFor="basket">Fruit basket</label>
    <Chosen id="basket" name="basket" options={options} multiple
      value={basket} onChange={setBasket} maxSelectedOptions={3} />
  </form>;
}

Omit value and use defaultValue for uncontrolled selection. name, required, disabled, readOnly, and form work through the native select. Set placeholder and searchPlaceholder separately when the closed and open prompts should differ.

What to try

• Single and multiple selection, grouped and disabled options, and a long choice label.
• Click a selected multiple result or its chip's × to remove it. Enter toggles the highlighted result too. displaySelectedOptions={false} hides selected rows; displayDisabledOptions={false} hides disabled rows without removing them from the native select.
• Switch each control to right-to-left, read-only, or disabled. An associated label keeps an open dropdown visible during a pointer press.
• Search for a missing value, reach the three-item selection limit, submit the native form, and reset it.
• Use onNoResults(query) and onNoResultsClear(query) to respond when an empty search message appears or disappears.
• In a focused single select, press Enter to open the list, Up at its first result to close it, and Backspace or Delete to clear an eligible closed selection.
• Compare the standalone default theme with the scoped Tailwind-compatible token theme in light and dark modes.

React uses camelCase props and direct value callbacks; it does not promise the full react-select API. See the React guide for controlled/open-state hooks, search settings, accessibility, server rendering, TypeScript, and Tailwind tokens. The classic configuration reference still documents the jQuery and Prototype options.