Skip to content

Product sorting

Preview Available in release assets

Change a collection's server-owned result order through an addressable GET request without taking ownership of filters or product truth.

Product sorting in context

Show code
<form class="thin-product-sorting" action="/collections/bags" method="get" aria-label="Sort products">
  <input type="hidden" name="availability" value="in-stock">
  <div class="thin-field">
    <label for="product-sort">Sort by</label>
    <select class="thin-select" id="product-sort" name="sort">
      <option value="featured">Featured</option>
      <option value="newest">Newest</option>
      <option value="price-asc" selected>Price, low to high</option>
      <option value="price-desc">Price, high to low</option>
    </select>
  </div>
  <button class="thin-button" type="submit">Update results</button>
  <noscript>
    <p>Choose an order, then use Update results.</p>
  </noscript>
</form>

Anatomy

  • Labelled native GET form
  • Preserved active-query inputs
  • Named sort select
  • Explicit submit action
  • No-script instruction

Variants and sizes

  • Standalone toolbar
  • Beside result count
  • Active filters preserved
  • Intrinsic narrow container

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

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

  • Default
  • Selected order
  • Pending response
  • Invalid query recovered by server
  • Reconnected
  • Long localized label
  • Narrow container

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

Submission navigates to a durable collection URL. Optional enhancement may submit on change or morph returned results, but the visible submit button, action, method, and current query remain authoritative.

Accessibility

Keep a visible label and submit action, preserve native select keyboard behavior, announce only the server-returned result summary, and do not use visual position to imply the selected order.

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 form.thin-product-sorting with method=get, one labelled select[name=sort], and hidden inputs for active query values owned by the collection response.

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

The browser submits the GET form and replaces the document with server-sorted results when CSS or optional enhancement is unavailable.

Assets and dependencies

  • /foundation.css
  • /layouts.css
  • /components.css
  • /patterns/ecommerce.css

Dependencies: None

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

Composition

Derived from the examples and style specs, not authored.

Composes