v0.9.4defuss-shadcn
Theme

defuss-shadcn / Website / Search & Navigation / filter-sidebar

Built with: CSS

Filter SidebarBLK

Groups detailed filtering controls beside a collection - categories with counts, a price range, colors, rating and availability, each group collapsible. Part of the Search & Navigation blocks.

On this page (2)
Component Skill — components/filter-sidebar/component-skill.md

Native basis

A <form method="get"> beside the results: a header with "Clear all", then <details open> groups - category checkboxes with counts, a min / max price, color swatches (checkboxes), a rating radio group and an availability Switch - and Apply.

Built from

Checkbox, Input, Switch, Button.

Web Platform APIs

<details><fieldset>:has()inputmode

Classes

.mk-filter-sidebar.mk-filter-sidebar-head.mk-filter-sidebar-group.mk-filter-sidebar-option.mk-filter-sidebar-range.mk-filter-sidebar-swatches.mk-filter-sidebar-swatch.mk-filter-sidebar-stars.mk-filter-sidebar-apply

Data attributes

--mk-swatch on color swatches.

§Default

One GET form: "Clear all", then <details open> groups - categories with counts, min / max price (numeric keyboard), color swatches (checkboxes with their names for screen readers), a rating radio group and an availability Switch.

§CSS view file

/* -- Filter Sidebar (website · Search & Navigation) -----------------------
   Groups detailed filtering controls beside a collection - categories with counts, a price range, colors, rating and availability, each group collapsible. */
@layer components {
  /* every box in the block measures border-box - the same on any page */
  :where(.mk-filter-sidebar, .mk-filter-sidebar *, .mk-filter-sidebar ::before, .mk-filter-sidebar ::after) { box-sizing: border-box; }
  .mk-filter-sidebar { width: 100%; max-width: 17rem;
    & form { display: grid; }
  }
  .mk-filter-sidebar-head { display: flex; align-items: baseline; justify-content: space-between; padding-block-end: 0.75rem;
    & h2 { margin: 0; font-size: 1rem; font-weight: 600; }
    & a { color: var(--muted-foreground); font-size: 0.8125rem; }
  }
  .mk-filter-sidebar-group { padding-block: 0.875rem; border-block-start: 1px solid var(--border);
    & > summary { display: flex; align-items: center; justify-content: space-between; cursor: pointer; font-size: 0.875rem; font-weight: 600; list-style: none; }
    & > summary::-webkit-details-marker { display: none; }
    & > summary::after { content: "+"; color: var(--muted-foreground); font-weight: 400; }
    &[open] > summary::after { content: "−"; }
    & > summary:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; border-radius: var(--radius-sm); }
    & > div { display: grid; gap: 0.5rem; padding-block-start: 0.75rem; }
    & fieldset { display: contents; }
    & legend { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  }
  .mk-filter-sidebar-option { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; cursor: pointer;
    & small { margin-inline-start: auto; color: var(--muted-foreground); font-size: 0.75rem; font-variant-numeric: tabular-nums; }
  }
  .mk-filter-sidebar-range { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.5rem; color: var(--muted-foreground); font-size: 0.8125rem;
    & .input { height: 2rem; font-size: 0.8125rem; }
  }
  .mk-filter-sidebar-swatches { display: flex; flex-wrap: wrap; gap: 0.5rem; }
  .mk-filter-sidebar-swatch { --mk-swatch: var(--muted); position: relative; width: 1.75rem; height: 1.75rem; border-radius: 50%; background: var(--mk-swatch); box-shadow: inset 0 0 0 1px oklch(0 0 0 / 0.15); cursor: pointer;
    & input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
    &:has(:checked) { outline: 2px solid var(--foreground); outline-offset: 2px; }
    &:has(:focus-visible) { outline: 2px solid var(--ring); outline-offset: 2px; }
  }
  .mk-filter-sidebar-stars { color: oklch(0.78 0.16 75); letter-spacing: 0.0625rem; }
  .mk-filter-sidebar-apply { margin-block-start: 1rem; }
  /* -- Accessibility ------------------------------------------- */
  @media (forced-colors: active) {
    .mk-filter-sidebar-swatch { forced-color-adjust: none; border: 1px solid CanvasText; }
    .mk-filter-sidebar-swatch:has(:checked) { outline-color: Highlight; }
  }
}

Comments, ideas or improvements? Edit this page's source on GitHub