About this set
The multiselect dropdown most filter panels need: a closed field that summarises the choice and opens a list of checkboxes. Counts, badge and a clear button is an amenities filter that lists the picked names, shows a count badge, gives each option its number of matching stays and offers a Clear button beside the label. Checkbox dropdown with select all is a task status filter with coloured dots, a Select all row that shows a dash when only some statuses are ticked, and a key hint footer; with one or two picks the field names them, with more it reads 3 selected, and with everything ticked it says All statuses. Both follow the WAI-ARIA select-only combobox pattern: focus stays on the field, aria-activedescendant marks the highlighted row, arrow keys, Home, End and Page keys move, Space or Enter ticks, Ctrl+A ticks or clears everything, typing jumps to a match, and Escape closes. A hidden select multiple holds the real value, so the form submits normally, and without JavaScript that native list is shown instead.
What’s included
- Select all row with a mixed state
- Summary text: names, then N selected, then All
- Count badge and a Clear button
- WAI-ARIA select-only combobox with a multi-select listbox and type-ahead
- Real select multiple kept in sync for form submission
- Native list shown when JavaScript is off
Accessibility
The field is a role="combobox" labelled by the visible label, with aria-expanded, aria-controls and aria-activedescendant pointing into a listbox marked aria-multiselectable; each option reports aria-selected. Arrow keys, Home, End, Page Up and Page Down move, Space or Enter ticks, Ctrl+A ticks or clears all, typing jumps to a match, and Escape or Tab closes. Focus shows a four-pixel ring, the ticks do not rely on colour alone, and the chevron turn and border transitions stop under prefers-reduced-motion.
Customise it
Set --ms-accent, --ms-tint, --ms-line and --ms-ring on .ms in the plain CSS and Bootstrap versions; the tick and dash are SVG data URIs in --ms-tick and --ms-dash. In Tailwind edit the --color-ms-* theme colours and the ms-tick and ms-dash utilities. data-names on the wrapper sets how many names are listed before the field switches to a count.
