Deprecated - Chosen is a library for making long, unwieldy select boxes more friendly.



This version of Chosen is not currently under active development while we decide on its future direction.


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:

For downloads, see:

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

  • Add functionality to allow templates

    Add functionality to allow templates

    I've added the functionality to allow templates in dropdowns by using the data attribute on options and a template option when setting up chosen.

    I've compiled the code and provided jquery and prototype examples.

    Below is the jQuery example.


    <select data-placeholder="Choose your favorite candy..." class="chzn-select-template-example" style="width:350px;" tabindex="11">
      <option value=""></option>
      <option data-type="chocolate" data-user-rating="1.8">M&Ms</option>
      <option data-type="fruity" data-user-rating="1">Starburst</option>
      <option data-type="fruity" data-user-rating="7">Skittles</option>
      <option data-type="chocolate" data-user-rating="9">Reese's</option>
      <option data-type="chocolate" data-user-rating="10">Snickers</option>

    Initialize It:

      template: function (text, templateData) {
        return [
          "<span style='float: right'>User Rating: " + templateData.userRating + "</span>",
          "<div>" + text + "</div>",
          "<div><i>type of candy: " + templateData.type + "</i></div>"         



    Thanks to Elliott Wood for code reviewing and to Select2 for inspiration.

    opened by cjstewart88 61
  • Percentage Width Support

    Percentage Width Support

    There have been a number of requests for variable width support in Chosen, but none have adequately solved the problem.

    This patch allows users to pass in a 'width' option. I've done cross-browser compatibility testing and verified that this works properly on FF8, Chrome, Safari, and Opera (IE is unchecked).

    I accomplished this by using absolute positioning on the search input, results, and choices, with a 100% (css customizable) width for the drop-down itself. This has the added benefit of removing some manual width calculations in the implementations.

    I pushed a modified gh-pages (with % container width) that demonstrates the result :

    opened by justindujardin 60
  • If

    If "display:none" is active when chosen first loads, the auto-width is not working correctly

    I've noticed that my "select" menus appear at the minimum size if they are not displayed when chosen is called (on document load). Is there a fix for this?

    To be clear: the page loads and nothing is displayed (CSS is set to display:none). Once a user clicks a certain checkbox, the dropdowns are displayed, but sized incorrectly by Chosen (although all of the other styles seem to have been applied, all widths are wrong).


    opened by shackrock 48
  • [WIP] Make Chosen framework agnostic using native JS

    [WIP] Make Chosen framework agnostic using native JS

    This PR takes over previous efforts to make Chosen framework-agnostic:

    This native version is now up-to-date with master as of January 23rd, 2014.

    opened by caccialdo 47
  • Chosen on Ipad scroll problem single select en click problem multiple select

    Chosen on Ipad scroll problem single select en click problem multiple select

    The recent fix: #2119 Fix touch event propagation

    seems to breaks other functionality of chosen on Ipad (tested in Ipad 3, latest version chosen). Problems:

    • single select: scroll of dropdown list does not work any more
    • multiple select: removing selected items is impossible and after the first time a click in the select window does not show the drop down list These problems can be reproduced using an Ipad on the standard chosen test site: on the Standard select and Multiple select examples. They probably have to do with the #2119 Fix as the functionality was ok before.
    Bug Has Solution 
    opened by olavtenbosch 41
  • Include compiled JS in repo for bower

    Include compiled JS in repo for bower

    When installing chosen using bower:

    bower install chosen

    It fetches from this repo directly, and since there is no compiled JS file, it is currently not usable with bower.

    opened by aq1018 30
  • Use word boundary matching

    Use word boundary matching


    This is a new PR for @koenpunt's excellent #1465. In his words:

    By making use of word boundary matching ( the split word search is much cleaner (no more actual splitting of strings), and the search results are better.

    I want to be very careful about merging this in, but I'm loving what I see so far. With default options set:

    Search String Expected to Match Old way New way
    Democratic Republic of Congo, The Democratic Republic of The :poop: :+1:
    of America United States (of America) :poop: :+1:
    Holland Netherlands/Holland :poop: :+1:

    Here's what I think we should do before this gets a final :shipit:

    • [ ] Add unit tests for verifying that search results are correct. To do this, we might need to break the actual search match function out of the winnow method.
    • [ ] Performance Test with 1000s of items (perhaps replacing test + match with a single match call)
    • [ ] Determine if we need to make an API change related to enable_split_word_search or search_contains. I don't think you should be able to turn off enable_split_word_search if search_contains is true, but I want to do some experimenting there.

    Fixes #75 and #1463

    opened by pfiller 29
  • Error when initializing on detached select

    Error when initializing on detached select

    Chosen throws an error when I try to init a select that isn't on DOM yet

    Example on Chrome Console:

    > $('<select />').chosen()
    TypeError: Cannot set property 'disabled' of undefined

    ps: I'm using the jQuery version. Thanks

    opened by DiogoDoreto 28
  • Simplify the design of Chosen, and organize the CSS

    Simplify the design of Chosen, and organize the CSS

    @pfiller @tjschuck @koenpunt

    This is a very large and significant design/css change. It most definitely breaks currently open PRs that touch CSS. It's probably the biggest since the last time we updated the design of Chosen.


    The design of Chosen is currently quite dated. Single Chosen's gradient (also used on Multi Chosen search-choices) is based off of OS X select boxes, but those have been redesigned as of Mavericks. The design of both Single and Multi are not terribly consistent, which causes extra and unnecessary CSS to accommodate. At the same time, the repo's Sass has been growing cruft. Properties are out of order and inconsistent across the Sass file.

    This has been bugging me for quite awhile. When I come across Chosen in the wild, it sticks out like a sore thumb, since it doesn't fit in with the design around it. Or the developer had to override a ton of properties just to have it fit into their app/website. It'd be nice to work Chosen towards a possible "theme-able" future.

    Doing something about it was a slightly overwhelming task, considering how much Chosen is used, and how many open PRs would most likely break. We had a hackweek at Harvest last week, and I decided to give it a shot. This might be shot down because of it's size and the number of open PRs, but I do believe it is a positive step forward for Chosen. It could be considered a 2.0 (from a design-only perspective, anyway).

    What's Changed

    • The design of both Single and Multi Chosen has been updated to be simpler and more consistent
    • All gradients have been removed (should allow Chosen to fit in better with both PC and Mac)
    • Added the outline property so Chosen's focus design fits into the standard OS X protocol (we could make this an option, but that requires JS)
    • Started using variables for sizes and colors (this is the beginning of a possibility to allow theming of Chosen)
    • Alphabetized all CSS properties (we should make this a rule, so as more changes happen, the code stays easy-to-read for everybody)
    • Organized the Sass file, removing unused definitions and properties (there was stuff in here from the very first design)

    I will comment directly in the code below pointing out anything helpful. Because of the alphabetizing of properties, I imagine the diff will be a little hard to read. Rather than post a bunch of screenshots, you should pull and look at this version side-by-side with the current version.

    opened by mlettini 25
  • Set selected value with javascript

    Set selected value with javascript

    Setting selected value with javascript doesn't work. I know that chosen() adds class single_examplechzn_o_0 to <li> which has nothing in common with option value and that #single_example no more exists after chosen(). Is there a way this can work?

    This works:

         <option value="1">1</option> 
         <option value="2">2</option> 

    This doesn't work:

         <option value="1">1</option> 
         <option value="2">2</option> 
    opened by mrpohoda 25
  • Scrolling is rough

    Scrolling is rough

    Since the latest updates scrolling select lists seems to have a "snap-to-grid" effect. In other words it's not smooth scrolling. Jumps 4-5 options at a time. It is worse on FF than IE.

    opened by t9nick 24
  • Chrome Update 105.0.5195.102 seems to have broken chosen

    Chrome Update 105.0.5195.102 seems to have broken chosen

    We use Chosen for a web app. I know this is deprecated but it looks like our form field values no longer sync between the input field and the chosen container objects especially with select options and where we have a single value displayed. Is there anything we should know? Thanks for any information. This effects Chrome and by proxy Edge.

    opened by mikeyheiser 0
  • Issue #3133: Use placeholder attribute for placeholder text.

    Issue #3133: Use placeholder attribute for placeholder text.



    • Switched placeholder text from value attribute to placeholder attribute on input element.

    Please double-check that:

    • [x] All changes were made in CoffeeScript files, not JavaScript files.
    • [ ] You used Grunt to build the JavaScript files and tested them locally.
    • [ ] You've updated both the jQuery and Prototype versions.
    • [x] You haven't manually updated the version number in package.json.
    • [x] N/A If necessary, you've updated the documentation.

    See the Pull Requests section of our Contributing Guidelines for more details.


    If your pull request is in reference to one or more open GitHub issues, please mention them here to keep the conversations linked together:

    opened by jenlampton 1
  • Use `placeholder` attribute on input elements for placeholder text (instead of `value` attribute)

    Use `placeholder` attribute on input elements for placeholder text (instead of `value` attribute)

    Chosen puts the Placeholder text into the value attribute on the input elements, instead of in the placeholder attribute. It still renders as though it was a placeholder.

    I'm using the localize.js service for translation on several websites. This service specifically searches for placeholder attributes and translates those, so that all visible text on the page can be translated. The localize script is not able to recognize the placeholder text, because it's not in the placeholder attribute, so these values are not properly translated.

    Is there some reason the placeholder attribute was not used for its intended purpose? Does the placeholder attribute not work as expected?

    I would like to propose that Chosen switch back to using attributes as they were intended to avoid this problem, and similar conflicts with other projects or systems that are expecting standard markup.

    opened by jenlampton 1
  • Speed up rendering when there are lot of select choen

    Speed up rendering when there are lot of select choen

    A simple change to speed up rendering when there are lots of select drop down to conver to select-chosen


    Provide a general description of the code changes in your pull request.

    Please double-check that:

    • [ ] All changes were made in CoffeeScript files, not JavaScript files.
    • [ ] You used Grunt to build the JavaScript files and tested them locally.
    • [ ] You've updated both the jQuery and Prototype versions.
    • [ ] You haven't manually updated the version number in package.json.
    • [ ] If necessary, you've updated the documentation.

    See the Pull Requests section of our Contributing Guidelines for more details.


    If your pull request is in reference to one or more open GitHub issues, please mention them here to keep the conversations linked together.

    opened by dhwang 0
  • JQuery Chosen Drop Down - Overlaps

    JQuery Chosen Drop Down - Overlaps

    I noticed the same thing. I applied a similar hack to @matt-tyas:


    $(this).closest('div').css('z-index', 999-i);


    Having the overlap issue. I added the solution by phrischybar but nothing is changing. Happens in all the browsers. Please help.


    opened by rushdib 0
  • v1.8.7(Jun 8, 2018)

  • v1.8.6(Jun 6, 2018)


    • #2988 Chosen is now available via Composer on


    • #2989 Revert previous clip-deprecation fixes in favor of hybrid clip and clip-path
    Source code(tar.gz)
    Source code(zip)
  • v1.8.5(Apr 11, 2018)

  • v1.8.4(Apr 11, 2018)


    • #2966 Copy license to build output directory. (#2945)
    • #2910 Do not highlight first result or clear search input when holding control/meta key. (#2888)
    • #2943 Remove forgotten usage of css clip. (#2942)
    • #2962 Use two inputs for Chosen’s focus and search. (#2953)
    • #2950 Do not apply empty style attributes. (#2949)
    Source code(tar.gz)
    Source code(zip) KB)
  • v1.8.3(Jan 22, 2018)

  • v1.8.2(Sep 5, 2017)

  • v1.8.1(Sep 5, 2017)

  • v1.8.0(Aug 24, 2017)


    • #2844 Don't search HTML escaped text
    • #2867 Clear search input value, reset results when using hide_results_on_select option (#2809)


    • #1483 Use word boundary matching to better match user expectations for searches.
    • #2860 Remove deprecation warnings on jQuery 3


    • #2813 All compiled source files (including minified) are now included in the package for bower and npm.
    • #2859 Update dev dependencies to use up-to-date packages
    Source code(tar.gz)
    Source code(zip) KB)
  • v1.7.0(Mar 24, 2017)

    From this version on, until further notice, no new features will be added, so pull requests for features will not be accepted. However, pull requests for bugfixes are still very much appreciated.


    • #2692 Update regex for highlighting (#2623)
    • #2713 Prevent bubbling of escape key (#1256, #2653)
    • #2712 Escape default text (#2314)
    • #2709 Do not clear search text on multi selection (#2549)
    • #2717 Unbind label click (#2238), only remove bound events (#2461)
    • #2721 Prevent activation of disabled fields (#2567)
    • #2710 Restore focus after removing an option (#2429)
    • #2722 Prevent action on clipboard events when select is disabled (#2460)
    • #1731 Focus input in multi select on container click (#1729)


    • #2687 Add option to keep results open for multi-select (#1546)
    • #2483 Use node-sass for building sass
    • #1510 Right to Left initialisation option (#1485)
    • #2704 Bye bye simulate
    • #2723 Update implementation regarding Content-Security-Policy (#2423)


    • #2634 Update README to reflect npm support
    • #2719 Update the version of jQuery in the docs to the latest 1.X (#2557)

    View all changes since v1.6.2

    Source code(tar.gz)
    Source code(zip) KB)
  • v1.6.2(Aug 2, 2016)

  • v1.6.1(Jun 22, 2016)

  • v1.6.0(Jun 22, 2016)


    • #2541 Add option to enable case sensitive search


    • #2498 Remove IE 6 hack that clobbered user-defined height overrides


    • #2560 Update browser support check


    • #2582 Broken link!
    • #2553 Add contributing templates

    Build process

    • #2550 A new build process that publishes NPM stuff!
    Source code(tar.gz)
    Source code(zip) KB)
  • v1.5.1(Feb 18, 2016)

  • v1.5.0(Feb 6, 2016)


    • #2440 Extend mobile browser detection
    • #2362 Added option max_shown_results


    • #2378 More accurate disable_search_threshold docs
    • #2436 Add docs for destroying Chosen

    Bug Fixes

    • #1994 Fixes focus highlighting on disabled Chosen – thanks @oriondean
    • #1705 Properly toggle default class on multi-Chosen
    • #2364 Fix incorrect "top" linear-gradient syntax
    • #2446 Calling chosen('destroy') on a non-Chosen element no longer wrongly initializes a new Chosen instance
    • #2475 Don't open Chosen on option/alt keyup
    • #2456 Remove unused CSS attribute
    • #2455 Removes some IE hacks

    Build system stuff

    • #2287 basic test harness in place – thanks @adunkman!
    • #2306 Update bower-chosen to use unminified versions
    • #2358 Reduce the size of the description for Bower
    • #2449 Try to keep Bower versions consistent
    Source code(tar.gz)
    Source code(zip) KB)
  • 1.4.2(Mar 28, 2015)

    Chosen is now publishing a bower-friendly version of the compiled files at harvesthq/bower-chosen. The compiled files are automatically pushed there thanks to Travis CI magic. See the following commits if you're interested in the specifics:

    • #2264 Add a way to build a public-facing Bower repo
    • #2283 Get a base travis file up and atom
    • #2284 Let Travis publish bower-chosen
    • #2285 Use bundler to install gems
    • #2286 [Travis] Allow detached head when parsing master ref.

    Random Bonus Bug Fix

    • #2268 Ensure result-selected is applied immediately when selecting an element
    Source code(tar.gz)
    Source code(zip) KB)
  • v1.4.1(Mar 11, 2015)

    Bug Fixes

    • #2195 Fix bug when person searches for text that matches placeholder
    • #2217 Show optgroup label in initial setup when include_group_label_in_selected is turned on
    • #2119 Fix touch event propagation
    • #2255 Fix issue with group labels when group_search:false

    Build Change

    • #2263 Use grunt-gh-pages to build our github pages branch
    Source code(tar.gz)
    Source code(zip) KB)
  • v1.4.0(Mar 3, 2015)

    Include Group Title in Selected Text

    in action

    Set include_group_label_in_selected to true and Chosen will include the Group label (if it exists) in the selected option text. See #1610 for more info.

    Bug Fixes and Updates

    • #2155 Fixes a dppx warning in Chrome
    • #2093 Fix Tap-through Bug (tapping an option on a touch-enabled device will no longer tap the element underneath it)
    • #1704 Inherit title attribute from options and optgroups
    • #2254 Fix XSS vulnerability
    Source code(tar.gz)
    Source code(zip) KB)
  • v1.3.0(Dec 17, 2014)

  • v1.2.0(Sep 23, 2014)

    • #1767 Add a default color to chosen results
    • #1776 Allow submit with Enter if results not showing
    • #1820 Wrap text for too-long options in multiselect
    • #1638 Change search_text to use option.text rather than option.html
    • #1765 Add touch events for chosen-single
    • #1951 Optimize image sizes with ImageOptim
    • #1983 Fixes scrolling with a mouse wheel in Firefox
    • #2009 Specify content-box box-sizing for text inputs
    • #2046 Disable space-bar page scroll when search is disabled
    • #2054 Use border-box everywhere

    Doc updates:

    • #1805, #1858, #1986
    Source code(tar.gz)
    Source code(zip) KB)
  • v1.1.0(Feb 7, 2014)

    New events

    • #1663 Add chosen:close triggerable event to go with chosen:open
    • #1712 Empty search triggers chosen:no_results event

    Loads of bug fixes and small improvements

    • #1430 Use document.createElement instead of html string
    • #1461 Single select results in sync
    • #1478 Trigger/Fire Results Showing Event After Winnow
    • #1603 Add support for paste events
    • #1702 Remove use of $ in favor of more widely supported methods.
    • #1736 Set sprite source URLs to default, allowing them to be overridden from outside Chosen.
    • #1744 Remove linear-gradient from single select input background
    • #1745 Fix closing selects in pop out windows

    Sweet, sweet documentation updates

    • #1429, #1443, #1457, #1470, #1501, #1602, #1741, #1766
    Source code(tar.gz)
    Source code(zip) KB)
  • 1.0.0(Jul 30, 2013)

    Just over 2 years after Harvest announced Chosen, we decided to pull the trigger on a 1.0 release. This is long overdue as Chosen has been used in production sites for all of the two years it's existed, but ... here we are.

    Notable Changes for 1.0

    • All CSS class names have been renamed from a chzn- root to a chosen- root.
    • All custom Chosen events starting with liszt are now prefaced with a chosen:

    See #1412 for more details.

    Source code(tar.gz)
    Source code(zip) KB)
  • 0.14.0(Jul 26, 2013)

    Optionally hide selected & disabled options

    By default, Chosen shows disabled & selected options with a greyed-out style. For some use cases, this can create unwanted noise. Now, you can pass display_selected_options: false and/or display_disabled_options: false when applying Chosen to have those options excluded from search results.

    See #1404 for more.


    Sometimes, you need to remove Chosen from the page. Chosen now provides an interface for doing that which cleans up the created HTML and event listeners and returns the original select to its place on the page.

    // jQuery version
    // Prototype version
    var chosen = new Chosen('#chzn-select');

    See #1396 for more.

    Chosen disabled by default on iPhone/iPod/Android mobile device

    On small screen devices, Chosen is not an improvement over the native select controls. While search is available, the keyboard covers up a large chunk of the search results and finding your desired selection can be difficult. For these devices, Chosen simply leaves the original select field alone.

    See #1388 for more.

    Single backspace clears choices

    Previously, it took two presses of backspace to remove choices from multiple selects. This is still an option for the time being, but the default has been switched to requiring one press.

    See #1375 for more.

    Misc Bug Fixes, Improvements and Code Changes

    • CSS Updates #1368, #1371
    • Prevent text selection on Chosen #1374
    • No longer expose classes to window context #1389
    • Single select value fix #1392
    • Remove javascript:void and attr references #1385, #1377
    • Always clear result highlight #1407
    • Replace characters only once #1411

    Misc Project Maintenance Changes

    • Document all the things. #1366, #1376, #1383
    • Add Gemfile for compass dependency #1373
    • Update copyright and license link #1397
    • Add @koenpunt as a maintainer #1399
    • Add anchors to documentation headers #1395
    • Updated stackoverflow instructions #1403
    Source code(tar.gz)
    Source code(zip) KB)
  • 0.13.0(Jul 17, 2013)

    Search Optgroups

    Chosen now searches the text of option groups by default (though an option exists to disable this functionality). When an optgroup matches, all results in that group are shown in the search results. #1343

    Misc Bug Fixes and Improvements

    • Change search match style #1344
    • Remove memoization of search field width. #1359
    • Remove Chosen's ID dependency #1360
    • Rebuild Search Results After liszt:updated #1361
    • Clear highlight when no results are found #1364
    Source code(tar.gz)
    Source code(zip) KB)
  • 0.12.1(Jul 11, 2013)

  • v0.12.0(Jul 10, 2013)

    Speed Chosen up significantly (#1339)

    Chosen's overall performance has been improved. This is most noticeable when using Chosen on selects containing hundreds or thousands of items. The pull request goes into greater detail about the changes and how much of a performance impact you can expect.

    Misc Project Maintenance Changes

    • Fix broken RTL example #1331
    • Updated release procedure to remove S3 #1323
    • Include docsupport contents in zip #1321
    • Replace deprecated grunt-css with grunt-contrib-cssmin #1319
    Source code(tar.gz)
    Source code(zip) KB)
  • v0.11.1(Jul 2, 2013)

    This release removes all generated JS and CSS from Chosen's git repository. A bundled zip file will now be made available using Grunt.

    This change will help reenforce Chosen's code conventions for a PR:

    1. Make all changes in CoffeeScript files, not JavaScript files.
    2. Use Grunt to build the JavaScript files.
    Source code(tar.gz)
    Source code(zip) KB)
  • v0.10.1(Jul 2, 2013)

    This release contains a heap-load of bug fixes.

    • Replace prop for jQuery legacy support #1311
    • Prevent default on arrow down #1309
    • Explicitly add files for gh-pages #1307
    • Fix RTL Disabled Search Issue #1300
    • Fix scroll bug in Prototype version #1301
    • Read-only search field when search is disabled. #1294
    • Remove Grunt-Bump #1280
    • Make sure Chosen isn't disabled before showing results. #1282
    • Fix choice build after update #1286
    Source code(tar.gz)
    Source code(zip)
  • v0.10.0(Jul 2, 2013)

    Feature Changes

    • Show disabled options (#1262): all options that match a given search are now displayed (previous versions hid selected or disabled options). Selected and disabled options will be displayed with a light gray style to differentiate them from other, selectable options.

    Bug Fixes

    • Only attempt to hide the dropdown if it's showing #1277
    • Add more margin for single selects with allow_single_deselect #1257
    Source code(tar.gz)
    Source code(zip)
  • v0.9.15(Jul 2, 2013)

    Contributing Guidelines #1236

    Bug Fixes & Refactoring

    • Wrap for attribute in quotes #963b051ecb
    • Ensure choice count is reflective of actual selected item count. #1171
    • Delete choice refactor #1232
    • Fix scroll issue in Prototype version #1213
    • Use the better supported offsetWidth property to get a fields width #1172
    Source code(tar.gz)
    Source code(zip)
  • v0.9.14(Jul 2, 2013)

    New Features & Improvements

    • Add support for labels #1152
    • Isolate Chosen Scrolling #1155

    Bug Fixes & Refactoring

    • Fixes bug with Isolated Scrolling #1186
    • Remove unused get_side_border_padding #1169
    • Fix issue when using both jQuery & Prototype #1168
    • Fix choices_click method #1163
    • Fix Right-to-Left scrollbar issue #1159
    Source code(tar.gz)
    Source code(zip)
Selectize is the hybrid of a textbox and