Chosen: A jQuery Plugin to Tame Unwieldy Select Boxes

Options

The following options describe the classic jQuery and Prototype adapters. The experimental vanilla and React editions are moving toward the same behavior; see the adapter parity inventory for current coverage and each edition's guide for its API.

Example:

  $(".my_select_box").chosen({
    disable_search_threshold: 10,
    no_results_text: "Oops, nothing found!",
    width: "95%"
  });

Shared initialization defaults

Set defaults in your application bootstrap before creating controls. Defaults are local to the adapter and apply only to future instances. Per-select options win, and a native select's data-placeholder or placeholder still takes precedence over configured placeholder text. Replace the defaults object or edit its properties; options are copied one level deep when an instance is created.

$.fn.chosen.defaults = { placeholder_text_single: "Choose an item" };
$(".my_select_box").chosen();
$(".special_select").chosen({ placeholder_text_single: "Choose a project" });

// Prototype: Chosen.defaults = { placeholder_text_single: "Choose an item" };

Per-select data attributes

Put supported scalar options on a select using kebab-case data-* names. For example, data-disable-search="true" sets disable_search: true for that select. Explicit JavaScript options override data attributes, which override shared initialization defaults. Attributes are read when Chosen is initialized; destroy and reinitialize it after changing them.

<select data-disable-search="true" data-allow-single-deselect="true" data-width="100%">
  <option value=""></option>
  <option>Atlas</option>
</select>

Boolean attributes accept exactly true or false; integer attributes accept nonnegative whole numbers; text and CSS width attributes use their literal value. data-width="false" preserves the CSS-controlled width setting. Invalid values and unknown option names are ignored. Callback and object options such as search_matcher, normalize_search_text, and parser_config still require JavaScript. The existing data-placeholder, data-no_results_text, and data-create_option_text attributes keep their established precedence.

Option	Default	Description
allow_single_deselect	false	When set to `true` on a single select, Chosen adds a UI element which selects the first element (if it is blank). The selection can also be cleared with Backspace or Delete when the control is focused.
allow_select_all	false	When set to `true` on a multiple select, Chosen adds a Select all result that selects the currently filtered, enabled options. The action respects `max_selected_options`. Command/Ctrl+A selects all when the search input is empty; with search text present, the shortcut retains its normal text-selection behavior.
allow_deselect_all	false	When set to `true` on a multiple select, Chosen adds a Deselect all result that clears every enabled selected option. Disabled selected options remain selected. Command/Ctrl+Shift+A invokes the action when the search input is empty.
deselect_selected_results	false	When set to `true` on a multiple select, selected results show a remove mark and can be deselected by clicking them, Ctrl/Command-clicking them, or pressing Enter while highlighted. Disabled selected options remain unchanged. Selected results must be visible (`display_selected_options` defaults to `true`).
shift_select_range	false	On a multiple select, click one option, then Shift-click another to add the visible options between them. Disabled options are skipped, existing choices remain selected, and `max_selected_options` still applies. The anchor must remain visible in the current filtered results. React uses `shiftSelectRange`.
select_all_text	"Select all"	Sets the text for the opt-in Select all action.
deselect_all_text	"Deselect all"	Sets the text for the opt-in Deselect all action.
disable_search	false	When set to `true`, Chosen will not display the search field (single selects only).
disable_search_threshold	0	Hide the search input on single selects if there are n or fewer options.
enable_split_word_search	true	By default, searching can match any word within an option tag. Set this option to `false` to require a match at the start of the option text. This start anchor also applies when `search_contains` is true.
inherit_select_classes	false	When set to `true`, Chosen will grab any classes on the original select field and add them to Chosen’s container div.
inherit_option_classes	false	When set to `true`, Chosen copies each selected option's classes to its selected-choice chip. Option result rows already have their option classes.
inherit_optgroup_classes	false	When set to `true`, Chosen copies the parent optgroup's classes to each selected-choice chip in a multiple select. Use this to style selected items by group without changing their labels or values. React uses `inheritOptgroupClasses`.
max_selected_options	Infinity	Limits how many options the user can select. When the limit is reached, the `chosen:maxselected` event is triggered.
max_items_shown	Infinity	On multiple selects, show at most this many selected choices while collapsed. A summary button reveals the rest for review or removal. This does not limit how many options can be selected. Use a positive integer; omit it to keep every choice visible.
paste_multiple_values	false	On multiple selects, paste comma-, semicolon-, tab-, or line-separated values or labels to select existing enabled options. Values match exactly; labels match without case sensitivity only when unique. Unknown, disabled, hidden, ambiguous, and over-limit entries remain in the search field for editing. No options are created; the native select fires one input and change event if selections change.
more_items_text	`function(count) { return "Show " + count + " more..."; }`	Returns the summary button text for selected choices hidden by `max_items_shown`. The count is the number of hidden choices. Override it for localization.
show_fewer_items_text	"Show fewer..."	Text for the summary button after all selected choices have been expanded.
no_results_text	"No results for:"	Plain text to display when no matching results are found. HTML markup is shown literally. The current search is shown at the end of the text (e.g., No results for: "Bad Search").
no_results_template	unset	Optional plain-text message with `{search}` where the search term should appear, for example `"No match for {search}."`. If the marker is omitted, the search term is omitted. Overrides `no_results_text` when set. The search term and surrounding text are escaped, so HTML is shown literally. React uses `noResultsTemplate`.
create_option	false	When enabled, offer to add the current search as a selected option when no result matches. Pass `true` for Chosen to append it, or a function called with the search text and the Chosen instance as `this`. A callback takes responsibility for adding the option; it can call `this.select_append_option({value: text, text: text})` after validation.
create_option_text	"Add Option:"	Plain-text label before the search text in the create-option result. HTML markup is shown literally. The select's `data-create_option_text` attribute takes precedence.
persistent_create_option	false	With `create_option` enabled, continue offering to add the search even when other results match, unless an option exactly matches it.
skip_no_results	false	With `create_option` enabled, hide the no-results message while still offering to add the search.
results_count_text	"1 result available" / "2 results available"	A callback that returns the localized text announced to assistive technologies when the available result count changes.
placeholder_text_multiple	"Select Some Options"	The text to be displayed as a placeholder when no options are selected for a multiple select.
placeholder_text_multiple_selected	unset	Optional text in a multiple select's search input after at least one item has been selected, such as `"Add another..."`. It does not change option labels or submitted values. The source select can use `data-placeholder-text-multiple-selected`; React uses `placeholderTextMultipleSelected`.
placeholder_text	Not set; type-specific defaults apply.	Fallback placeholder for either select type. A type-specific `placeholder_text_single` or `placeholder_text_multiple` takes precedence; a native `placeholder` or `data-placeholder` attribute on the select takes precedence over the options. Set any of these to an empty string to omit the placeholder.
placeholder_text_single	"Select an Option"	The text to be displayed as a placeholder when no options are selected for a single select.
search_contains	false	By default, Chosen’s search matches starting at the beginning of a word. Setting this option to `true` allows matches starting from anywhere within a word. When `enable_split_word_search` is false, the match still must start at the beginning of the option text, including punctuation.
search_word_boundary	`"^\|\\s\|\\b"`	Optional regular-expression source for the boundary before a search term when `search_contains` is false. The default uses JavaScript word boundaries, which can split a word after accented letters. For names with Danish letters, use `"^\|[^A-Za-zÆØÅæøå]"` to keep those letters within a word. Include `^` if a match at the start should remain possible. This pattern is trusted JavaScript configuration, not user search text. React uses `searchWordBoundary`. See the live search examples.
highlight_prefix_matches	false	With `search_contains: true`, prefer the first rendered, selectable option whose label begins with the search text for keyboard highlighting and Enter selection. The result list and native option order stay unchanged. If no visible prefix match exists, Chosen uses its usual highlight. This setting does not override a custom `search_matcher`.
search_matcher	Built-in matching.	Optional function called with the current search text and each parsed option or group. Return `true` to match. It replaces Chosen's word, value, alternate-text, and group matching rules; the callback also receives an empty search. The usual result visibility and minimum search length still apply. Custom matches are not highlighted because the boolean result has no match position. See the example below for a regex-based rule.
search_input_type	"search"	Chosen renders its generated search input as `type="search"`. Set this option to `"text"` if an integration depends on the previous input type. Chosen keeps `autocomplete="off"` and hides the native search clear button. Browser autofill suggestions may still appear depending on the browser and its settings.
min_search_length	0	Keep result rows hidden until the trimmed search text reaches this many characters. The search field remains available, and the default shows results immediately.
max_search_length	1000	Truncate search text to this many characters for matching. The input itself remains editable. The default guards against oversized regular expressions.
normalize_search_text	Identity function.	Transform both search text and option labels before built-in matching, for example to remove accents. The callback should return a string. A custom `search_matcher` replaces this matching path.
split_search_terms	false	When `true`, whitespace-separated search terms may match in any order, and every term must match. Combine with `search_contains: true` to match each term anywhere within a word, for example `"ack be"` matches “American Black Bear”. The default treats the full search text as one phrase.
search_delay	0	Wait this many milliseconds after input before updating search results. The default keeps searches immediate. Enter, Tab, and result-navigation keys apply any pending search first.
search_in_values	false	By default, Chosen’s search matches in content of HTML<option> element. Setting this option to `true` allows matches in `value` attribute of the <option> element.
group_search	true	By default, Chosen will search group labels as well as options, and filter to show all options below matching groups. Set this to `false` to search only in the options.
parser_config	`{}`	Advanced parser settings. `{copy_data_attributes: true}` copies each option's `data-*` attributes into its parsed result data. Chosen already reads `data-search-text` without this setting.
backspace_deletes_choices	true	By default, pressing backspace in an empty multiple-select search removes a selected choice. Set this option to `false` to prevent backspace from removing choices.
single_backstroke_delete	true	By default, pressing delete/backspace on multiple selects will remove a selected choice. When `false`, pressing delete/backspace will highlight the last choice, and a second press deselects it.
multiselect_allow_tab_to_select	false	When `true`, pressing Tab while a multiple-select result is highlighted selects that result. The default lets Tab leave the control without changing its value.
open_on_label_click	Single: false; multiple: true.	Controls whether clicking an associated `label` opens the dropdown. Set this option to `false` to focus either type without opening it, or `true` to open either type. Omitting the option preserves Chosen's existing single and multiple behavior.
width	Original select width.	The width of the Chosen select box. By default, Chosen attempts to match the width of the select box you are replacing. Set `width: false` to leave the generated container without an inline width so your stylesheet can size it, for example with `#my_select_chosen { width: 24rem; }`. With this setting, `recalculate_width_on_update` does not replace your CSS width. If your select is hidden when Chosen is instantiated, specify a width or use the CSS-controlled setting.
dropdown_width	100% of the Chosen control.	Sets the result dropdown width independently from the Chosen control. Pass any CSS width, such as `"320px"` or `"40rem"`. Use `"max-content"` to expand the dropdown for its longest label in browsers that support intrinsic sizing. Custom-width dropdowns float with a small gap and align to the control's reading edge.
recalculate_width_on_update	false	When `true`, measure the native select again when Chosen updates after options change, and resize the control to match. Explicit `width` always takes precedence. If the select's parent is hidden, Chosen keeps its previous width until a later update can measure it.
dropdown_position	"absolute"	Set to `"fixed"` when an ancestor with `overflow: hidden` clips the results. Chosen keeps the dropdown aligned while the page or a containing element scrolls and on window resize. Percentage `dropdown_width` values stay relative to the Chosen control. A transformed or paint-contained ancestor can still establish a clipping containing block; remove that ancestor style or use a different layout in that case.
mobile_fullscreen	false	When `true`, an open picker fills the visible viewport on touch screens up to 600px wide. It follows the on-screen keyboard, lets results scroll, and adds a Close button. The original select still owns form values and events. Wider screens and non-touch pointers keep the usual dropdown. React uses `mobileFullscreen`.
display_disabled_options	true	By default, Chosen includes disabled options in search results with a special styling. Setting this option to false will hide disabled results and exclude them from searches.
display_selected_options	true	By default, Chosen includes selected options in search results with a special styling. Setting this option to false will hide selected results and exclude them from searches. Note: this is for multiple selects only. In single selects, the selected result will always be displayed.
display_selected_value	false	When set to `true`, closed single selects and selected multiple choices display each option's value. The dropdown continues to display and search the option label.
include_group_label_in_selected	false	By default, Chosen only shows the text of a selected option. Setting this option to `true` will show the text and group (if any) of the selected option.
max_shown_results	Infinity	Only show the first (n) matching options in the results. This can be used to increase performance for selects with very many options.
case_sensitive_search	false	By default, Chosen's search is case-insensitive. Setting this option to `true` makes the search case-sensitive.
hide_results_on_select	true	By default, Chosen's results are hidden after an option is selected. Setting this option to `false` will keep the results open after selection. This only applies to multiple selects.
rtl	false	Chosen supports right-to-left text in select boxes. Set this option to `true` to support right-to-left text options. Note: the `chosen-rtl` class on the select has precedence over this option. However, the classname approach is deprecated and will be removed in future versions of Chosen.

jQuery plugin interface

The jQuery adapter exposes $.fn.chosen.Constructor and $.fn.chosen.AbstractConstructor for integrations that extend Chosen. $.fn.chosen.noConflict() restores the plugin previously registered as $.fn.chosen and returns Chosen's plugin function. Save that function to continue using Chosen under another name:

var chosenPlugin = $.fn.chosen.noConflict();
$.fn.myChosen = chosenPlugin;
$(".my-select").myChosen();

Ordinary $(".my-select").chosen() calls and per-control options remain unchanged. Extending a constructor's prototype affects every instance, so prefer options when configuring an individual control.

Custom search matcher

This example searches only options with SKU values. Group records have group: true; option records provide text, value, and the original option_element.

$(".my_select_box").chosen({
  search_matcher: function(query, item) {
    if (item.group) return false;
    return /^SKU-\d+$/i.test(item.value) &&
      item.text.toLowerCase().indexOf(query.toLowerCase()) !== -1;
  }
});

Attributes

Certain attributes placed on the select tag or its options can be used to configure Chosen.

Option labels come from native <option> text. When an option has no text, Chosen uses its label attribute instead. An empty value with a whitespace-only label remains a placeholder. Labels are displayed as text; HTML nested in an option is not copied into Chosen's results or selected choices.

Chosen preserves Unicode option text, including Cyrillic. If replacement characters appear, inspect the native option text before initializing Chosen and check the page or response character encoding. Once the browser has decoded source text as replacement characters, Chosen cannot recover the original letters.

Example:

  <select class="my_select_box" data-placeholder="Select Your Options" readonly>
    <option value="1">Option 1</option>
    <option value="2" selected>Option 2</option>
    <option value="3" disabled>Option 3</option>
    <option value="4" hidden>Option 4</option>
  </select>

Attribute	Description
data-placeholder	The text to be displayed as a placeholder when no options are selected for a select. Defaults to "Select an Option" for single selects or "Select Some Options" for multiple selects. Note:This attribute overrides anything set in the `placeholder_text_multiple` or `placeholder_text_single` options. Chosen treats an option as an empty placeholder only when both its text and value are empty. A blank option with a nonempty value remains selectable. Use `<option value=""></option>` for a blank first option. ` ` and `&ensp;` are whitespace text, not null values; if the value is omitted, the browser derives it from that text. Chosen keeps those native values instead of treating the option as empty.
data-search-text	Add alternate words or phrases that may match this option during search without displaying them in the result label. This is useful for synonyms, translations, abbreviations, and legacy names.
data-chosen-always-visible	Add this attribute to an `option` that should remain in the results when its text does not match the search, such as “Other”. It stays in native option order, is selectable normally, and does not count as a search match for Select all. Hidden options and `display_disabled_options: false` still take precedence. Marked options remain visible beyond `max_shown_results`; trigger `chosen:updated` after changing the attribute.
placeholder	A native placeholder on the select is used when `data-placeholder` is absent. Both attributes override placeholder options.
data-no_results_text	Overrides `no_results_text` for this select.
data-no-results-template	Sets `no_results_template` for this select, unless an explicit JavaScript option overrides it.
data-create_option_text	Overrides `create_option_text` for this select.
multiple	The attribute `multiple` on your select box dictates whether Chosen will render a multiple or single select.
select-by-group	On a multiple select, clicking an optgroup label selects its available options. Selected and disabled options are skipped. Supported by both the jQuery and Prototype versions.
readonly	As a Chosen extension, the `readonly` attribute makes a select non-editable while leaving the original select enabled, so its selected value remains part of form submission. Remove the attribute and trigger `chosen:updated` to make it editable again.
selected, disabled, hidden	Chosen automatically highlights selected options, hides hidden options and disables disabled options.
aria-*	Chosen copies accessible names, descriptions, and other ARIA attributes from the select to its search input. Chosen manages the combobox state attributes itself. Trigger `chosen:updated` after changing attributes on the select.

Keyboard navigation

Typing a printable character on a focused single select opens its search and starts filtering. When the result list is active, Chosen supports the standard select navigation keys:

Keyboard navigation scrolls the highlighted result into view. Pointer hover highlights a result without moving the list, so a partly visible option stays under the pointer.

Key	Behavior
Enter	Open a focused closed single select, or choose the highlighted result when its list is open.
Up / Down	Move through results. Up from the first highlighted result closes the list when the select has a selection.
Backspace / Delete	Clear a focused, closed single select when `allow_single_deselect` is enabled and its first option is blank. Text editing and multiple-choice Backspace behavior are preserved.
Home / End	Move to the first or last available result. When the search input contains text, these keys retain their normal text-caret behavior.
Page Up / Page Down	Move through the available results by one visible page.
Escape	Close an open result list and stop the handled key event from reaching ancestor controls such as dialogs.
Printable characters	When single-select search is disabled, build a short prefix and move to the first available matching result, similar to a native select.

Styling Chosen

Chosen's appearance is controlled with standard CSS. Load your overrides after chosen.css so they take precedence, and scope them to a wrapper, an inherited class, or one generated Chosen container when the change should not apply globally.

A select with id="my-select" receives a Chosen container with id="my_select_chosen". Chosen replaces punctuation in source IDs with underscores before adding the _chosen suffix. The inherit_select_classes option can also copy application classes from the original select to its Chosen container.

On touch devices, Chosen keeps its search inputs at least 16px so iPhone Safari does not zoom the page when they receive focus. Larger theme font sizes still apply, and users can still zoom the page normally.

For sites using Content Security Policy without inline scripts or styles, load Chosen's JavaScript and stylesheet from allowed sources and initialize it in an allowed external script. See the CSP integration guide.

Theme variables

Chosen accepts CSS custom properties on each .chosen-container or an ancestor. Override them on all Chosen controls, or use a wrapper or inherited class to scope a theme. The standalone stylesheet supplies fallback values, so no CSS framework is required.

Variable	Purpose
`--chosen-font-family` and `--chosen-font-size`	Base control typography. The family inherits from the application by default.
`--chosen-text-color`, `--chosen-placeholder-color`, and `--chosen-group-color`	Primary, placeholder, disabled-choice, and selected-group text.
`--chosen-background`	Fallback surface color when a more specific background is not set.
`--chosen-control-background`, `--chosen-dropdown-background`, and `--chosen-search-background`	Independent closed control, result dropdown, and search field surfaces.
`--chosen-border-width`, `--chosen-border-style`, and `--chosen-border-color`	Shared default border.
`--chosen-invalid-border-color`	Border for an explicitly invalid control (`#dc2626` by default) in all four editions. Set `aria-invalid="true"` on the original select, then update Vanilla Chosen if the attribute changed; native `:invalid` alone does not change Chosen's existing appearance.
`--chosen-dropdown-border-color`, `--chosen-search-border-color`, and `--chosen-choice-border-color`	Surface-specific borders that fall back to the shared border.
`--chosen-active-color`, `--chosen-active-border-color`, and `--chosen-hover-border-color`	Active result text and interactive control borders.
`--chosen-highlight-color` (legacy), `--chosen-highlight-background`, and `--chosen-highlight-text-color` (Vanilla and React)	Highlighted result colors. Set a contrasting text color when overriding the highlight background.
`--chosen-bulk-action-color` and `--chosen-divider-color`	Bulk action text and the divider below its last row.
`--chosen-selected-background`	Selected result background, including checked React options in a multiple select.
`--chosen-muted-color` and `--chosen-muted-background`	No-results message colors.
`--chosen-border-radius` and `--chosen-choice-border-radius`	Control, dropdown, search, result, and selected-choice radii.
`--chosen-control-line-height`, `--chosen-control-padding-block`, `--chosen-control-padding-inline-start`, and `--chosen-control-padding-inline-end`	Closed single-select size and density.
`--chosen-rtl-control-padding-block`	Optional right-to-left single-select block padding. It inherits an explicit control-padding override and otherwise preserves Chosen's compact RTL default.
`--chosen-control-shadow`	Closed single- and multiple-select shadow.
`--chosen-dropdown-shadow`, `--chosen-dropdown-offset`, and `--chosen-dropdown-z-index`	Attached dropdown elevation, overlap, and stacking.
`--chosen-floating-dropdown-gap` and `--chosen-floating-dropdown-shadow`	Separation and elevation for a custom-width dropdown (4px and a modest shadow by default).
`--chosen-search-text-color`, `--chosen-search-placeholder-color`, and `--chosen-search-shadow`	Search field text, placeholder, and shadow.
`--chosen-search-padding-block`, `--chosen-search-padding-inline-start`, and `--chosen-search-padding-inline-end`	Search field density and icon space.
`--chosen-result-padding-block`, `--chosen-result-padding-inline`, `--chosen-result-line-height`, and `--chosen-group-option-indent`	Result density and grouped-option indentation.
`--chosen-results-max-height`	Maximum scrollable result-list height.
`--chosen-choice-color`, `--chosen-choice-background`, and `--chosen-choice-focus-background`	Selected multiple-choice colors.
`--chosen-choice-padding-block`, `--chosen-choice-padding-inline-start`, `--chosen-choice-padding-inline-end`, `--chosen-choice-gap`, and `--chosen-choice-line-height`	Selected multiple-choice size and spacing.
`--chosen-rtl-choice-padding-block`	Optional right-to-left selected-choice block padding. It inherits an explicit choice-padding override and otherwise preserves Chosen's compact RTL default.
`--chosen-choice-disabled-border-color` and `--chosen-choice-disabled-background`	Disabled selected-choice surface.
`--chosen-disabled-background`, `--chosen-disabled-text-color`, and `--chosen-disabled-opacity`	Disabled control treatment.
`--chosen-focus-ring-width`, `--chosen-focus-ring-style`, and `--chosen-focus-ring-color`	Composable keyboard focus ring.
`--chosen-focus-outline` and `--chosen-focus-outline-offset`	Full outline override and its offset. The ring variables are used when the full outline is not set.
`--chosen-transition-duration` and `--chosen-transition-timing`	Control border, background, and shadow transitions.
`--chosen-icon-chevrons`, `--chosen-icon-search`, `--chosen-icon-clear`, and `--chosen-icon-clear-active`	Control icons as CSS images.
`--chosen-icon-size`	Size of the scalable control icons (15px by default). Set a relative value such as `1rem` alongside the control spacing variables.

Editing the control icons

The four source SVG icons are included in the repository and npm package. Edit an SVG in sass/icons/, then run npm run build to embed it in the Sass defaults and generated CSS. The stylesheet still needs no separate image request. To customize one project without rebuilding Chosen, set the matching --chosen-icon-* CSS variable to a url(...) image.

Relative sizing

Chosen keeps its existing pixel defaults. Scope relative units to a wrapper when a form should scale with the root font size. The SVG icons remain sharp at the configured size; leave enough inline padding for a larger search icon.

.relative-form .chosen-container {
  --chosen-font-size: 1rem;
  --chosen-control-line-height: 1.5rem;
  --chosen-control-padding-block: 0.3rem;
  --chosen-search-padding-inline-end: 2rem;
  --chosen-result-padding-block: 0.35rem;
  --chosen-icon-size: 1rem;
}

Tailwind CSS

Tailwind projects can map Chosen directly to their theme in the components layer. Load chosen.css before this application stylesheet. Chosen does not require Tailwind at runtime. The example also enables Tailwind's optional forms reset; Chosen's own selectors and variables keep the generated controls consistent under either forms-plugin strategy.

@import "tailwindcss";
@plugin "@tailwindcss/forms";

@layer components {
  .chosen-container {
    --chosen-font-family: var(--font-sans);
    --chosen-font-size: var(--text-sm);
    --chosen-text-color: var(--color-slate-900);
    --chosen-placeholder-color: var(--color-slate-500);
    --chosen-control-background: var(--color-white);
    --chosen-border-color: var(--color-slate-300);
    --chosen-search-border-color: var(--color-slate-300);
    --chosen-active-color: var(--color-indigo-500);
    --chosen-active-border-color: var(--color-indigo-500);
    --chosen-hover-border-color: var(--color-slate-400);
    --chosen-highlight-color: var(--color-indigo-600);
    --chosen-highlight-background: var(--color-indigo-600);
    --chosen-bulk-action-color: var(--color-indigo-600);
    --chosen-divider-color: var(--color-slate-300);
    --chosen-selected-background: var(--color-indigo-50);
    --chosen-border-radius: var(--radius-lg);
    --chosen-choice-border-radius: var(--radius-md);
    --chosen-control-shadow: var(--shadow-xs);
    --chosen-dropdown-shadow: var(--shadow-lg);
    --chosen-control-padding-block: calc(var(--spacing) * 2);
    --chosen-control-padding-inline-start: calc(var(--spacing) * 3);
    --chosen-search-padding-block: calc(var(--spacing) * 2);
    --chosen-search-padding-inline-start: calc(var(--spacing) * 3);
    --chosen-result-padding-block: calc(var(--spacing) * 2);
    --chosen-result-padding-inline: calc(var(--spacing) * 3);
    --chosen-focus-ring-color: var(--color-indigo-500);
    --chosen-transition-duration: 150ms;
    --chosen-transition-timing: var(--ease-out);
  }

  .dark .chosen-container {
    color-scheme: dark;
    --chosen-text-color: var(--color-slate-100);
    --chosen-placeholder-color: var(--color-slate-400);
    --chosen-group-color: var(--color-slate-300);
    --chosen-muted-color: var(--color-slate-300);
    --chosen-active-color: var(--color-indigo-300);
    --chosen-control-background: var(--color-slate-900);
    --chosen-dropdown-background: var(--color-slate-800);
    --chosen-search-background: var(--color-slate-900);
    --chosen-border-color: var(--color-slate-700);
    --chosen-search-border-color: var(--color-slate-600);
    --chosen-hover-border-color: var(--color-slate-500);
    --chosen-bulk-action-color: var(--color-indigo-400);
    --chosen-divider-color: var(--color-slate-600);
    --chosen-selected-background: var(--color-slate-700);
    --chosen-muted-background: var(--color-slate-700);
    --chosen-choice-background: var(--color-slate-700);
    --chosen-choice-color: var(--color-slate-100);
    --chosen-choice-disabled-background: var(--color-slate-800);
    --chosen-disabled-background: var(--color-slate-800);
    --chosen-disabled-opacity: 1;
    --chosen-dropdown-shadow: var(--shadow-2xl);
  }
}

Selector	Purpose
`.chosen-container`	The generated wrapper for every Chosen control.
`.chosen-single`	The closed single-select control.
`.chosen-choices` and `.search-choice`	The multiple-select control and each selected choice.
`.chosen-choice-summary`	The opt-in Show more / Show fewer button among selected multiple choices.
`.chosen-drop` and `.chosen-results`	The dropdown and its result list.
`.chosen-search-input`	The search input used by single and multiple selects.
`.active-result`, `.highlighted`, `.result-selected`, and `.disabled-result`	Result availability, keyboard or pointer highlight, selection, and disabled states.
`.chosen-result-deselectable` and `[data-chosen-action]`	Opt-in selected-result removal and bulk action rows.
`.chosen-results-status`	Visually hidden live status text that announces the available result count.
`.chosen-with-drop`, `.chosen-container-active`, `.chosen-disabled`, `.chosen-readonly`, `.chosen-rtl`, `.chosen-dropup`, and `.chosen-floating-dropdown`	Open, active, disabled, readonly, right-to-left, and upward-opening container states.

The default light-theme result highlight is #3672d2 with white text. When overriding --chosen-highlight-color or --chosen-highlight-text-color, check their contrast together.

Customizing the Sass palette

Projects that compile Chosen's Sass can replace its palette defaults without editing the distributed source. This also lets an integration map Chosen to colors from a shared design system.

@use "chosen-jjj/sass/chosen" with (
  $chosen-text-color: #1f2937,
  $chosen-active-color: #2563eb,
  $chosen-hover-color: #1d4ed8,
  $chosen-border-color: #9ca3af,
  $chosen-group-color: #6b7280,
  $chosen-background-color: #ffffff,
  $chosen-selected-color: #e5e7eb
);

Changing the single-select arrow and height

To use a single down arrow and a shorter control for a select with id="my-select", add this CSS after Chosen's stylesheet:

#my_select_chosen .chosen-single {
  line-height: 20px;
  padding-top: 2px;
  padding-bottom: 2px;
}
#my_select_chosen .chosen-single div b {
  background: none;
  position: relative;
}
#my_select_chosen .chosen-single div b:after {
  content: "";
  position: absolute;
  top: 50%;
  right: 5px;
  margin-top: -2px;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #444;
}

Keyboard focus uses a blue outline around a closed single or multiple control. While the dropdown is open, the joined blue border identifies the active control and result list without drawing a second outline across their seam. Sass users can set $chosen-focus-outline and $chosen-focus-outline-offset before importing chosen.scss.

Styling matched search text

Chosen underlines the matching part of each search result by default. To show matches in bold instead, add this CSS after Chosen's stylesheet:

.chosen-container .chosen-results li em {
  font-weight: bold;
  text-decoration: none;
}

Sass users can set $chosen-highlight-font-style, $chosen-highlight-font-weight, and $chosen-highlight-text-decoration before importing chosen.scss.

Classes

Classes placed on the select tag can be used to configure Chosen.

Example:

  <select class="my_select_box chosen-rtl">
    <option value="1">Option 1</option>
    <option value="2">Option 2</option>
    <option value="3">Option 3</option>
  </select>

Classname Description

chosen-rtl

Classname	Description
chosen-rtl	Chosen supports right-to-left text in select boxes. Add the class `chosen-rtl` to your select tag to support right-to-left text options. Note: The `chosen-rtl` class will pass through to the Chosen select even when the `inherit_select_classes` option is set to `false`. Note: This is deprecated in favor of using the `rtl: true` option (see the Options section).

Chosen supports right-to-left text in select boxes. Add the class chosen-rtl to your select tag to support right-to-left text options.

Note: The chosen-rtl class will pass through to the Chosen select even when the inherit_select_classes option is set to false.

Note: This is deprecated in favor of using the rtl: true option (see the Options section).

Triggered Events

Chosen triggers a number of standard and custom events on the original select field.

Example:

  $('.my_select_box').on('change', function(evt, params) {
    do_something(evt, params);
  });

Event	Description
change	Chosen triggers the standard DOM event whenever a selection is made. In the jQuery version, the extra parameter contains `selected` for the new value and `deselected` for the previous value. Switching a single select provides both keys; clearing it provides only `deselected`. An initial blank placeholder is not reported as a deselected value. Note: The selected and deselected parameters are not available for Prototype.
chosen:ready	Triggered after Chosen has been fully instantiated.
chosen:maxselected	Triggered if `max_selected_options` is set and that total is broken.
chosen:search_updated	Triggered when Chosen’s search results are updated after typing search term. The event includes a corresponding `search_term` parameter.
chosen:showing_dropdown	Triggered when Chosen’s dropdown is opened.
chosen:hiding_dropdown	Triggered when Chosen’s dropdown is closed.
chosen:search	Triggered when Chosen has performed search.
chosen:no_results	Triggered when a search returns no matching results. The event data includes `search_term` and `no_results` (a jQuery collection or Prototype element), so a listener can customize the rendered row.
chosen:no_results_clear	Triggered just before a visible no-results row is removed. The event data includes its previous `search_term` and connected `no_results` element. It is a notification, not a cancelable action.

Note: all custom Chosen events (those that begin with chosen:) also include the chosen object as a parameter.

$('.my_select_box').on('chosen:no_results', function(event, data) {
  data.no_results.find('span').text('Try another spelling');
});
$('.my_select_box').on('chosen:no_results_clear', function(event, data) {
  console.log('No-results message cleared for', data.search_term);
});

Triggerable Events

You can trigger several events on the original select field to invoke a behavior in Chosen.

After an AJAX response, update the original select's options and selected value before triggering chosen:updated on that same select. For jQuery, use $(select).trigger("chosen:updated"); for Prototype, use select.fire("chosen:updated"). If the response replaces the select element itself, destroy Chosen on the old select before replacing it, then initialize Chosen on the new element. This removes the old generated control beside the select.

Remote source API

The optional chosen-jjj/remote entry exports connectRemoteSelect for jQuery, Prototype, and Vanilla, plus createRemoteSource for custom integrations. Its loader receives the query and { signal, limit }, and returns a bounded array of { value, label } records or a Promise for one. The defaults are minLength: 2 and limit: 50. The React edition exports useRemoteOptions with the same loader and defaults. For a remote React single select, set disableSearchThreshold={-1} so an empty result page does not make the search read-only. All editions keep selected native values available across result pages. See the remote search guide and the working demos.

Example:

  // tell Chosen that a select has changed
  $('.my_select_box').trigger('chosen:updated');

Event	Description
chosen:updated	This event should be triggered whenever Chosen’s underlying select element changes (such as a change in selected options).
chosen:activate	This is the equivalant of focusing a standard HTML select field. When activated, Chosen will capture keypress events as if you had clicked the field directly.
chosen:open	This event activates Chosen and also displays the search results.
chosen:close	This event deactivates Chosen and hides the search results.

When opening Chosen from a keyboard shortcut in another editable element, cancel that shortcut's default action before triggering chosen:open. Opening the dropdown focuses its search input; otherwise the browser may insert the shortcut character there. For example, a keydown handler for @ can call event.preventDefault() before $(select).trigger("chosen:open").

Concept and development by Patrick Filler for Harvest.
Design and CSS by Matthew Lettini.
1.8.x and earlier maintained by @pfiller, @kenearley, @stof, @koenpunt, and @tjschuck.
2.0.x and later maintained by @jjj.
Chosen includes contributions by many fine folks.