About this set
Multiselects that run on HTML and CSS alone, with no script at all. Popover checklist with a live count is a pizza toppings dropdown: a button with popovertarget opens a popover of real checkboxes with prices, a CSS counter shows how many are ticked both in a badge on the button and as 3 of 8 selected in the footer, :has() swaps the button text between None yet and selected, and Done closes the popover. The popover stays rendered while closed, hidden with visibility, so the counter keeps counting, and anchor positioning places it under its button, which is its implicit anchor. Checkbox chips with a live count is a cuisine filter of pill-shaped checkboxes that fill and show a tick when picked, with a 4 of 10 cuisines selected line underneath. Both have a reset button that restores the ticks the page loaded with. Because the inputs are ordinary checkboxes, the form submits them as usual, Escape and clicking outside close the popover, and focus returns to the button.
What’s included
- No JavaScript
- Popover opened with popovertarget and placed with anchor positioning
- Live counts from CSS counters
- Trigger text and chip states driven by :has()
- Real checkboxes that submit with the form
Accessibility
The checkboxes are real inputs inside a fieldset with a legend, so each one announces its own state; the button is labelled by the visible label and the browser reports its expanded state for the popover. The counts are drawn by CSS and are hidden from screen readers, so they add no information that is not already on the checkboxes. Focus shows an outline on the button, on each checkbox and around each chip, and the popover fade stops under prefers-reduced-motion.
Customise it
Change --mx-accent, --mx-tint and --mx-line on .mx; the tick is an SVG data URI in --mx-tick. In Tailwind edit the --color-mx-* theme colours; the counter names are mx-on and mx-all.
