Filter

A compact selection filter and reset control. These classes belong to the opt-in Official preset. Add @presets "standard,official"; to the CSS entry. Standard supplies the utilities, palette, and preflight used alongside these structural shortcuts.

Classes

• filter, filter-reset

Example

The markup below shows the structure. Follow the linked Storybook specimen for its complete styling and, where relevant, interactive behavior.

<fieldset>
  <legend>Framework</legend>
  <div class="filter">
    <button class="filter-reset" type="button" aria-label="Clear filter">×</button>
    <button type="button" aria-pressed="false">React</button>
    <button type="button" aria-pressed="true">Vue</button>
  </div>
</fieldset>

Variants and composition

The single-choice filter collapses nonselected direct options until keyboard focus restores them. Use data-filter-mode="multiple" to keep options visible for multiple selection; filter-reset appears when a direct choice is active. Keep controls and the reset directly under filter so nested selections do not change the outer filter. Wrapping rows use gap-row:2.

Behavior and accessibility

Single-choice examples use native radios or buttons with pressed state. The application owns value changes and reset; keyboard focus must not hide the options.

Reference

See the interactive Storybook specimen ↗. Continue to Footer or return to the Official preset overview.