Select2 | Cynosure Design System

Overview

Select2 (v4.1.0-rc.0) replaces native <select> elements with a styled, accessible dropdown that supports search filtering and multi-select. It is initialized via the shared js/components/selects.js utility.

Standard usage

Wrap a native <select> in a .c-select container:

Handlebars

<div class="c-select">
  <select name="{{properties.field_name}}">
    {{#each properties.options}}
    <option value="{{this.value}}">{{this.label}}</option>
    {{/each}}
  </select>
</div>

The shared utility automatically initializes Select2 on all .c-select select elements when the page loads.

Variants

Selector	Behavior	Notes
`.c-select select`	Standard dropdown; search hidden	Default for all styled selects
`.event-form-select`	Shows search field after 5 results	Event filter forms
`.mktoForm select`	Auto-wrapped in `.c-select` on init	Marketo form fields; 1s timeout on init
`.c-lang-switcher select`	Language switcher; no search	Uses custom `.c-lang-switcher__dropdown` CSS class
`.c-provider-finder__select select`	Provider finder filter; no search	Provider search pages
`.c-provider-finder__select--treatment select`	Multi-select with selection counter	Reads `CYNO_DATA.filter_labels` for i18n strings
`.c-provider-finder__select--product select`	Multi-select with selection counter	Reads `CYNO_DATA.filter_labels` for i18n strings
`.c-select--treatment select`	Footer multi-select with counter	Footer "Find a Provider" form
`.c-select--product select`	Footer multi-select with counter	Footer "Find a Provider" form

Importing the utility

In your block's script.js:

JavaScript

/**
 * CTA Provider Block
 *
 * Provider search form with filterable select dropdowns.
 *
 * @shared selects
 *   Trigger: .c-select select
 *   Behavior: Select2 styled dropdown; search hidden (minimumResultsForSearch: Infinity)
 *
 * @see /guidelines/javascript/selects
 * @see /guidelines/javascript/shared-utilities
 */
import '../../js/components/selects.js';

i18n strings

Multi-select variants use CYNO_DATA.filter_labels for user-facing strings. This object is injected by WordPress via wp_localize_script. Available keys:

JavaScript

CYNO_DATA.filter_labels = {
  any:                   "Any",
  selected:              "selected",
  select_treatment_any:  "Select treatment (any)",
  select_product_any:    "Select product (any)",
};

Accessibility notes

Select2 generates ARIA attributes (role="listbox", aria-selected, aria-activedescendant) automatically.
Keyboard navigation (arrow keys, Enter, Escape) is built in.
Do not hide the native <select> with display: none before Select2 initializes — Select2 handles this itself.
The .c-select__dropdown CSS class is applied to the dropdown container to allow scoped styling.

Blocks that use selects.js

cta-provider, download, downloads-columns, downloads-list, downloads-split, events-upcoming-list-sidebar, footer, grid-three-column, grid-three-column-nav, hero-contact, hero-news, hero-search-provider, posts-latest