Disclosure states
Use the bordered style for self-contained settings and help, or the filled style for compact controls with a useful collapsed summary. Both use native details/summary. Markup and choosing a style.
These six filter states cover no selections, short selections, and wrapped selections, each collapsed and expanded. Clear stays inside the filled header before the chevron, aligned with the title. Examples are independent, synthetic, and never saved or sent.
Theme comparison: These source examples force light and dark schemes. The compiled package follows system preference; see the generated-package example and theme guidance.
No selections · collapsed
Dark mode
No selections · expanded
Light mode
Dark mode
Selected filters · collapsed
Light mode
Dark mode
Selected filters · expanded
Light mode
Dark mode
Many selections · collapsed
Light mode
Dark mode
Many selections · expanded
Light mode
Dark mode
Bordered sections · matching chevrons
Collapsed
Light mode
Shopping preferences Choose how completed items are displayed and how your shopping list is organized.
This bordered section uses the same inward/downward chevron and keeps it aligned with the title.
Dark mode
Shopping preferences Choose how completed items are displayed and how your shopping list is organized.
This bordered section uses the same inward/downward chevron and keeps it aligned with the title.
Expanded
Light mode
Shopping preferences Choose how completed items are displayed and how your shopping list is organized.
This bordered section uses the same inward/downward chevron and keeps it aligned with the title.
Dark mode
Shopping preferences Choose how completed items are displayed and how your shopping list is organized.
This bordered section uses the same inward/downward chevron and keeps it aligned with the title.
Composition and accessibility
- Show “All items” when neither group is restricted. Otherwise, join selected labels with middle dots in stable group order. The whole summary may wrap beneath the title; keep Clear and the chevron on its first line. Do not add category prefixes when the labels already explain themselves.
- Clear is a named native button outside summary in the DOM, visually positioned in a reserved header slot. Its target must not cover the title or chevron. It clears both groups, returns focus to summary before hiding, and leaves expansion unchanged. In the keyboard order, it follows the visible filter controls when expanded and follows summary directly when collapsed.
- “All stores” and “All categories” reset only their own group. Native buttons use
aria-pressed; closing preserves selections. Native summary exposes expansion without a duplicate role or ARIA state. See MDN summary guidance. - These controls add no live announcement duplicating pressed-state feedback. Applications own actual filtering, persistence, and concise result messages. Keep a result region mounted before updates; follow the catalog's live-region timing and naming guidance.
-
specimen-filter-*andspecimen-disclosure-*are example-only layout classes.disclosure-filters.jssupplies one shared synthetic renderer/controller for this page and the catalog. Neither the layout hooks nor scripts are public library APIs or shipped package code. - Verify target separation, native keyboard behavior, focus after clearing, long and translated labels, narrow layouts, real zoom, and actual screen-reader speech in your application. Browser assertions do not establish spoken output or physical-device behavior.
Working catalog example and application responsibilities · Package API and customization reference