FacetedFilter

Multi-select filter of toggleable options with optional counts and an inline search box.

FacetedFilter is a multi-select filter — a labelled popover of toggleable option pills, each optionally showing a result count. Selecting several options builds an array value, reported through onChange. Turn on showSearch to filter long option lists, or set inline to drop the popover shell and render the pills directly. Use it for categorical facets like status, tag, or owner.

Example

Preview

import { FacetedFilter } from '@officina/ui';
import { useState } from 'react';

function StatusFilter() {
  const [value, setValue] = useState<string[]>([]);
  return (
    <FacetedFilter
      label="Status"
      value={value}
      onChange={setValue}
      showSearch
      options={[
        { value: 'open', label: 'Open', count: 12 },
        { value: 'closed', label: 'Closed', count: 5 },
      ]}
    />
  );
}

API

Prop	Type	Default	Description
label*	string	—	Filter label shown on the trigger.
onChange*	(value: T[]) => void	—	Called with the new selection array.
options*	FacetOption<T>[]	—	Selectable facet options, optionally with counts.
value*	T[]	—	Currently selected option values.
inline	boolean	false	Render inline instead of inside a popover.
searchPlaceholder	string	—	Placeholder for the option search box.
showSearch	boolean	—	Show a search box above the options.

Example

API

On this page