Filters

BlockCSS only

Two patterns for narrowing a list: a filter bar of inputs + actions, and segmented tabs. Both are pure markup — submit the form (or wire the tabs) however your app does.

Filter bar & tabs

Open ↗

<div class="space-y-6">
  <!-- segmented tab filters -->
  <div class="filters-tabs" data-filters-tabs>
    <a href="#" class="filters-tab" data-filters-tab>All</a>
    <a href="#" class="filters-tab" data-filters-tab data-active>Active</a>
    <a href="#" class="filters-tab" data-filters-tab>Archived</a>
  </div>

  <!-- filter bar: inputs + actions -->
  <form class="filters" data-filters>
    <div class="filters-main" data-filters-main>
      <div class="filters-row" data-filters-row>
        <input class="input filters-item" type="date" data-filters-item />
        <input class="input filters-item" type="date" data-filters-item />

        <select class="input filters-item" data-filters-item>
          <option>Any currency</option>
          <option>US Dollar</option>
          <option>Euro</option>
        </select>
      </div>

      <div class="flex items-center gap-3" data-filters-actions>
        <button type="submit" class="button-tertiary">Apply</button>
        <button type="reset" class="button-ghost-foreground">Reset</button>
      </div>
    </div>
  </form>
</div>

Filter bar

<form class="filters" data-filters>
  <div class="filters-main" data-filters-main>
    <div class="filters-row" data-filters-row>
      <input class="filters-item input" type="date" data-filters-item />

      <select class="filters-item input" data-filters-item>
        <option>Any currency</option>
      </select>
    </div>

    <div class="flex items-center gap-3" data-filters-actions>
      <button type="submit" class="button-tertiary">Apply</button>
    </div>
  </div>
</form>

Class	Role
`filters`	Form root (vertical stack).
`filters-main`	Wrapping row of inputs + actions.
`filters-row`	A group of filter inputs.
`filters-item`	Constrains an input’s width.

Segmented tabs

Each tab is a filters-tab; mark the current one with data-active. Separators between inactive tabs are drawn automatically.

<div class="filters-tabs" data-filters-tabs>
  <a href="#" class="filters-tab" data-filters-tab>All</a>
  <a href="#" class="filters-tab" data-filters-tab data-active>Active</a>
  <a href="#" class="filters-tab" data-filters-tab>Archived</a>
</div>