Faceted filters, ConNext Website

Design system / Components / Faceted filters

Data & registers Documenten Stable NL beschikbaar NLDS-compliant

React / MDX usage

Mount in MDX as `<FacetedFilters/>`

Sidebar panel of facet checkbox lists. Controlled component: pass selected + onChange from a parent state. The <FilterChip/> companion renders an active-chip strip above the results so users can pop selections one by one.

Import & example

import {useState, useMemo} from 'react';
import {FacetedFilters, SolutionGrid, SolutionCard} from '@conduction/docusaurus-preset/components';

const SOLUTIONS = [/* ... */];

function FilterableSolutions() {
  const [selected, setSelected] = useState({});
  const filtered = useMemo(
    () => SOLUTIONS.filter(s => matchesFilters(s, selected)),
    [selected]
  );

  const facets = [
    {key: 'sector', label: 'Sector', items: [
      {value: 'public', label: 'Publieke sector', count: 5},
      {value: 'mkb',    label: 'MKB',             count: 3},
      {value: 'health', label: 'Zorg',            count: 2},
    ]},
    {key: 'goals', label: 'Doel', items: [/* ... */]},
  ];

  return (
    <div style={{display: 'grid', gridTemplateColumns: '240px 1fr', gap: 56}}>
      <FacetedFilters facets={facets} selected={selected} onChange={setSelected} />
      <SolutionGrid columns={2}>
        {filtered.map(s => <SolutionCard key={s.href} {...s} />)}
      </SolutionGrid>
    </div>
  );
}

Props

facets array of {key, label, items: [{value, label, count?}]}
selected object keyed by facet.key, value is an array of selected values
onChange setter callback (selected => ...)
clearLabel override the "Clear all filters" button copy

Fields can be single-valued (s.sector === 'public') or array-valued (s.goals.includes('compliance')); the filter logic lives in the parent so callers control match semantics.