Modernizing Dropdown Selections in Web Applications
chosen-js, react-select, and select2 are libraries used to enhance standard HTML select elements with search, tagging, and styling capabilities. react-select is built specifically for React applications using components and props. select2 and chosen-js are legacy jQuery plugins that manipulate the DOM directly and depend on jQuery. Choosing the right tool depends heavily on your framework — React projects should avoid jQuery dependencies.
Npm Package Weekly Downloads Trend
Github Stars Ranking
Stat Detail
Chosen-js vs React-Select vs Select2: Architecture and Integration Compared
These three libraries solve the same problem — making HTML select boxes more powerful — but they approach it from different eras of web development. react-select is built for modern component frameworks, while select2 and chosen-js belong to the jQuery era. Understanding their architectural differences is critical for maintaining stable applications.
🏗️ Framework Integration & Dependencies
react-select is a pure React component.
- It has no external dependencies like jQuery.
- It works within React's virtual DOM and lifecycle methods.
// react-select: Native React component
import Select from 'react-select';
const MyComponent = () => (
<Select options={options} />
);
select2 requires jQuery.
- It attaches directly to DOM nodes using jQuery selectors.
- It conflicts with React if used inside React components without careful wrappers.
// select2: jQuery initialization
import $ from 'jquery';
import 'select2';
$('#my-select').select2({
data: options
});
chosen-js also requires jQuery.
- It is a fork of the original Chosen library.
- It modifies the DOM structure directly after page load.
// chosen-js: jQuery initialization
import $ from 'jquery';
import 'chosen-js';
$('.chosen-select').chosen();
📥 Data Binding & Options
react-select accepts data as a prop.
- You pass an array of objects directly to the component.
- Changes to the prop update the UI automatically.
// react-select: Props-based data
const options = [
{ value: 'chocolate', label: 'Chocolate' },
{ value: 'strawberry', label: 'Strawberry' }
];
<Select options={options} />
select2 accepts data via configuration or DOM.
- You can pass an array to the config or use existing
<option>tags. - Updates require manual jQuery calls to reflect changes.
// select2: Config-based data
$('#my-select').select2({
data: [
{ id: 'chocolate', text: 'Chocolate' },
{ id: 'strawberry', text: 'Strawberry' }
]
});
chosen-js relies on existing DOM elements.
- It reads
<option>tags already present in the HTML. - Dynamic updates require manipulating the DOM then triggering updates.
// chosen-js: DOM-based data
// HTML: <select class="chosen-select"><option>Chocolate</option></select>
$('.chosen-select').chosen();
// To update: modify DOM then trigger
$('.chosen-select').trigger('chosen:updated');
🎨 Customization & Styling
react-select uses React components for customization.
- You can replace internal parts like
OptionorControlwith your own components. - Styles are applied via props or a custom theme object.
// react-select: Custom components
const CustomOption = (props) => (
<components.Option {...props}>
<strong>{props.label}</strong>
</components.Option>
);
<Select components={{ Option: CustomOption }} />
select2 uses templates and CSS.
- You define HTML templates for results in the config.
- Styling requires overriding default CSS classes.
// select2: Template customization
$('#my-select').select2({
templateResult: (data) => `<strong>${data.text}</strong>`
});
chosen-js uses CSS classes and limited config.
- Customization is mostly done via CSS overrides.
- There is no built-in way to replace internal rendering logic.
// chosen-js: CSS customization
// HTML: <select class="chosen-select custom-class"></select>
$('.chosen-select').chosen();
// CSS: .custom-class .chosen-single { background: red; }
⚡ Event Handling
react-select uses React props for events.
- Events like
onChangeare passed as standard props. - State management stays within React.
// react-select: React events
const handleChange = (selected) => {
console.log(selected.value);
};
<Select onChange={handleChange} />
select2 uses jQuery events.
- You listen for events like
select2:selecton the element. - This requires jQuery event handlers outside React's scope.
// select2: jQuery events
$('#my-select').on('select2:select', (e) => {
console.log(e.params.data);
});
chosen-js uses jQuery events.
- You listen for
chosen:changeon the element. - Similar to Select2, this bypasses React's event system.
// chosen-js: jQuery events
$('.chosen-select').on('chosen:change', (evt, params) => {
console.log(params.selected);
});
📊 Summary: Key Differences
| Feature | react-select | select2 | chosen-js |
|---|---|---|---|
| Framework | ⚛️ React | 🧩 jQuery | 🧩 jQuery |
| Data Input | 📥 Props (Array) | 📥 Config or DOM | 📥 DOM Only |
| Updates | 🔄 Automatic (React State) | 🛠️ Manual (jQuery) | 🛠️ Manual (DOM Trigger) |
| Customization | 🎨 React Components | 🎨 Templates | 🎨 CSS Only |
| Events | ⚡ React Props | ⚡ jQuery Events | ⚡ jQuery Events |
| Modern Stack | ✅ Yes | ❌ No | ❌ No |
💡 The Big Picture
react-select is the clear choice for modern React development — it respects the component model and avoids external dependencies. It handles state, updates, and styling in ways that feel natural to React developers.
select2 and chosen-js are legacy tools — they belong to the jQuery era of web development. While still functional for older projects, they introduce friction in modern stacks due to DOM manipulation and jQuery requirements.
Final Thought: If you are building with React, stick to react-select. If you are maintaining an old jQuery site, select2 offers more features than chosen-js, but both should be replaced when migrating to modern frameworks.
How to Choose: chosen-js vs react-select vs select2
- chosen-js:
Choose this only for legacy projects where the original Chosen library is already in use and needs a maintained fork. It is lighter than Select2 but still relies on jQuery and direct DOM changes. Avoid this for modern component-based architectures.
- react-select:
Choose this for any new React application. It integrates cleanly with React's lifecycle, supports server-side rendering, and avoids jQuery conflicts. It offers strong TypeScript support and customizable components without direct DOM manipulation.
- select2:
Choose this only if you are maintaining a legacy jQuery application that requires rich dropdown features. Do not use this in new React projects because it conflicts with React's virtual DOM and requires jQuery. It is best suited for older server-rendered pages using jQuery.
Popular Comparisons
README for chosen-js
Chosen
Chosen is a library for making long, unwieldy select boxes more user friendly.
- jQuery support: 1.7+
- Prototype support: 1.7+
For documentation, usage, and examples, see: http://harvesthq.github.io/chosen/
For downloads, see: https://github.com/harvesthq/chosen/releases/
Package managers
Chosen is available through Bower, npm, and Composer, however, the package names are not the same.
To install with Bower:
bower install chosen
To install with npm:
npm install chosen-js
To install with Composer:
composer require harvesthq/chosen
The compiled files for these packages are automatically generated and stored in a 2nd Chosen repository. No pull requests will be accepted to that repository.
Contributing to this project
We welcome all to participate in making Chosen the best software it can be. The repository is maintained by only a few people, but has accepted contributions from over 50 authors after reviewing hundreds of pull requests related to thousands of issues. You can help reduce the maintainers' workload (and increase your chance of having an accepted contribution to Chosen) by following the guidelines for contributing.
Chosen Credits
- Concept and development by Patrick Filler for Harvest.
- Design and CSS by Matthew Lettini
- Repository maintained by @pfiller, @kenearley, @stof, @koenpunt, and @tjschuck.
- Chosen includes contributions by many fine folks.