Product filters

Preview Available in release assets

Filter a collection with URL-addressable native GET controls that can be progressively enhanced.

Product filters in context

<form class="thin-product-filters" action="/collections/bags" method="get">
  <fieldset>
    <legend>Filter products</legend>
    <div class="thin-choice-row">
      <input class="thin-choice" id="filter-availability" type="checkbox" name="availability" value="in-stock">
      <label for="filter-availability">In stock</label>
    </div>
    <div class="thin-choice-row">
      <input class="thin-choice" id="filter-sale" type="checkbox" name="sale" value="true">
      <label for="filter-sale">On sale</label>
    </div>
  </fieldset>
  <button class="thin-button">Apply filters</button>
  <a href="/collections/bags">Clear all</a>
</form>

Show code

<form class="thin-product-filters" action="/collections/bags" method="get">
  <fieldset>
    <legend>Filter products</legend>
    <div class="thin-choice-row">
      <input class="thin-choice" id="filter-availability" type="checkbox" name="availability" value="in-stock">
      <label for="filter-availability">In stock</label>
    </div>
    <div class="thin-choice-row">
      <input class="thin-choice" id="filter-sale" type="checkbox" name="sale" value="true">
      <label for="filter-sale">On sale</label>
    </div>
  </fieldset>
  <button class="thin-button">Apply filters</button>
  <a href="/collections/bags">Clear all</a>
</form>

Anatomy

Native GET form
Filter fieldsets
Named controls
Apply and clear actions
Server validation or status

Variants and sizes

Neutral theme
Thin-Sky theme
Intrinsic narrow and wide containers

Gallery coverage: No structured variant fixtures are published yet; the primary example above is the only verified production markup.

States and difficult content

Rendered fixtures exercise authored content and constrained layouts with the same production assets.

Default
Applied
Pending
Invalid
Reconnected
Narrow container

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

Links and forms own navigation and submission. Optional dialog, media, toast, confirm, or Datastar enhancement may coordinate mechanics but must render returned server truth.

Accessibility

Preserve landmarks, headings, labels, native controls, status text, focus order, image alternatives, and non-color state. Announce only server-confirmed changes.

Contract

COMPOSE

Basis

Native links, headings, forms, lists, and status content; no product-specific APG widget

Evidence

tests/unit/library/ecommerce-patterns.test.ts

API

Use semantic HTML with .thin-product-filters. Keep price, inventory, variants, cart lines, totals, and errors in server-rendered markup.

Behavior tier: datastar-optional

Structured host, property, and example tables are not authored for this item yet. Use the summary above and the primary example.

Fallback

Products, prices, inventory messages, variant choices, and cart actions remain server-authored links, forms, and content without optional enhancement.

Assets and dependencies

/foundation.css
/layouts.css
/components.css
/patterns/ecommerce.css
/behaviors.js
/icons/sprite.svg

Dependencies: quantity-input, rating, toast, confirm-dialog, drawer, product-gallery, lightbox

Source: packages/ui/src/style/ecommerce.ts

Composition

Derived from the examples and style specs, not authored.

Composes

Used by

Collection