Dropdowns — Filter menu with checkboxes

An open filter disclosure combines search, counted checkbox rows and separate Clear and Apply actions. Use when several pending filter choices need one apply step.

ReactHTML

1440 × 480

Open in new tab

Component.tsx47 lines

export default function DropdownsFilterCheckboxes() {
  return (
    <details open className="group relative h-80 w-72 text-neutral-900 sm:w-80">
      <summary className="inline-flex h-11 cursor-pointer list-none items-center justify-center gap-2 rounded-md border border-neutral-300 bg-white px-5 text-sm font-medium text-neutral-900 transition-colors hover:bg-neutral-50 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900 [&::-webkit-details-marker]:hidden">
        <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-4 shrink-0"><path d="M3 5h18l-7 8v6l-4 2v-8z" /></svg>
        Status
        <span className="inline-flex items-center rounded-full border border-neutral-300 px-2.5 py-0.5 text-xs font-medium"><span className="sr-only">Applied filters: </span>2</span>
        <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="size-4 shrink-0 transition-transform group-open:rotate-180"><path d="m6 9 6 6 6-6" /></svg>
      </summary>
      <div className="absolute top-11 left-0 mt-2 w-64 rounded-md border border-neutral-200 bg-white p-2 shadow-lg">
        <div className="relative">
          <label htmlFor="dropdowns-filter-checkboxes-search" className="sr-only">Search statuses</label>
          <svg aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" className="pointer-events-none absolute top-3 left-3 size-4 text-neutral-500"><circle cx="10" cy="10" r="6" /><path d="m15 15 5 5" /></svg>
          <input id="dropdowns-filter-checkboxes-search" type="search" placeholder="Search statuses" aria-describedby="dropdowns-filter-checkboxes-hint" className="h-10 w-full rounded-md border border-neutral-300 bg-white px-3 pl-9 text-sm placeholder:text-neutral-500 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900" />
          <p id="dropdowns-filter-checkboxes-hint" className="sr-only">Search by status label.</p>
        </div>
        <fieldset className="mt-2">
          <legend className="sr-only">Status filters</legend>
          <label className="flex h-8 cursor-pointer items-center gap-2 rounded-md px-2 text-sm transition-colors hover:bg-neutral-100">
            <input type="checkbox" name="status" value="draft" defaultChecked className="size-4 shrink-0 accent-neutral-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900" />
            <span>Draft</span>
            <span className="ml-auto text-xs tabular-nums text-neutral-500">12</span>
          </label>
          <label className="flex h-8 cursor-pointer items-center gap-2 rounded-md px-2 text-sm transition-colors hover:bg-neutral-100">
            <input type="checkbox" name="status" value="published" defaultChecked className="size-4 shrink-0 accent-neutral-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900" />
            <span>Published</span>
            <span className="ml-auto text-xs tabular-nums text-neutral-500">24</span>
          </label>
          <label className="flex h-8 cursor-pointer items-center gap-2 rounded-md px-2 text-sm transition-colors hover:bg-neutral-100">
            <input type="checkbox" name="status" value="scheduled" className="size-4 shrink-0 accent-neutral-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900" />
            <span>Scheduled</span>
            <span className="ml-auto text-xs tabular-nums text-neutral-500">8</span>
          </label>
          <label className="flex h-8 cursor-pointer items-center gap-2 rounded-md px-2 text-sm transition-colors hover:bg-neutral-100">
            <input type="checkbox" name="status" value="archived" className="size-4 shrink-0 accent-neutral-900 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900" />
            <span>Archived</span>
            <span className="ml-auto text-xs tabular-nums text-neutral-500">4</span>
          </label>
        </fieldset>
        <div className="mt-2 flex items-center justify-between gap-3 border-t border-neutral-200 pt-2">
          <button type="button" className="inline-flex h-11 items-center rounded-md px-2 text-sm font-medium text-neutral-900 underline underline-offset-4 hover:text-neutral-600 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">Clear</button>
          <button type="button" className="inline-flex h-11 items-center justify-center rounded-md bg-neutral-900 px-5 text-sm font-medium text-white transition-colors hover:bg-neutral-700 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-neutral-900">Apply</button>
        </div>
      </div>
    </details>
  )
}

Pattern notes

When to use: Use for multiple filters with an explicit apply step. Choose dropdowns-select-descriptions for a single value or dropdowns-action-menu for commands. Variations: use priority labels, add a checkbox-row disabled state, or omit search for a very short option set.
Hierarchy: Read the Status trigger and applied-count badge, then search, four status rows and footer actions. Rows contain a native 16px checkbox, one-word label and right-aligned 12px tabular count. The fieldset legend names Status filters; the search has a hidden label and an associated hint. Counts use at most 4 digits; action labels one word.
Responsive: The root grows from 288px to 320px at 640px. The 256px panel, checkbox rows and footer stay the same size and remain left aligned. The 320px reserve includes the open panel, with standard 44px actions and a 40px input.
Layout: A relative 288px (w-72) by 320px (h-80) root grows to 320px (sm:w-80) wide at 640px. The standard 44px outlined trigger contains a 16px filter icon, Status, a bordered count badge and a chevron, with 8px gaps. A 256px panel sits 8px below it, with rounded-md corners, 1px border, 8px padding and shadow-lg. A 40px search field has a leading 16px icon. Four 32px checkbox rows start 8px below. An 8px-spaced divider introduces two 44px footer actions.
States: The disclosure is open and Draft and Published start checked. Checkbox rows hover neutral-100; native checkboxes use accent-neutral-900 and standard keyboard-focus outlines. Search and footer actions also show 2px outlines offset 2px. The trigger hovers neutral-50 and its chevron rotates while open. Apply hovers neutral-700; Clear hovers neutral-600 text. The badge shows two applied filters while checkbox changes are pending. Host behavior wires search, Clear and Apply, and updates the applied count. No disabled filters are shown.

Desktop wireframe

┌──────────────────────────────────────────────────────┐
│ [Filter Status 2 ^]                                  │
│ ┌────────────────────────────────────┐               │
│ │ [Search statuses]                  │               │
│ │ [x] Draft                      12  │               │
│ │ [x] Published                  24  │               │
│ │ [ ] Scheduled                   8  │               │
│ │ [ ] Archived                    4  │               │
│ ├────────────────────────────────────┤               │
│ │ [Clear]                    [Apply] │               │
│ └────────────────────────────────────┘               │
└──────────────────────────────────────────────────────┘

View all

Dropdowns — Account menu with profile header
Layout tags: layered,icons,compact
Dropdowns — Action menu with sections and shortcuts
Layout tags: layered,icons,compact
Dropdowns — Breadcrumb branch disclosure
Layout tags: layered,list,compact

Dropdowns — Filter menu with checkboxes

Pattern notes

More in Dropdowns

Dropdowns — Account menu with profile header

Dropdowns — Action menu with sections and shortcuts

Dropdowns — Breadcrumb branch disclosure