Filter Panel Items

This is the reference for the available object types that can be passed into a <searchcraft-filter-panel>’s items array.

For more information on how Filter Panel works, see the Filtering Search Results page.

Available Items

FacetsFilterItem

Renders a facet index field as list as filterable checkbox view.

{
  fieldName: string;
  type: 'facets';
  label: string;
  options: {
    showSublevel: boolean;
    exclude?: string[];
  };
}

Options

• showSublevel (required): boolean - Whether to show nested facet values in a hierarchical structure.
• exclude (optional): string[] - Array of facet values or paths to exclude from rendering. Supports two formats:
  • Full path exclusion: Values starting with / exclude the path and all its children (e.g., "/news" excludes "/news", "/news/local", "/news/fargo", etc.)
  • Segment exclusion: Values without / are treated as segment names (e.g., "local" excludes all paths containing a segment named “local”)

Examples

Exclude a path and all its children:

const facetItem = {
  type: 'facets',
  fieldName: 'section',
  label: 'Section',
  options: {
    showSublevel: true,
    exclude: ['/news']
    // This excludes "/news" and ALL its children:
    // "/news", "/news/local", "/news/fargo", "/news/politics", etc.
    // but keeps "/sports", "/weather", etc.
  }
};

Exclude specific nested paths:

const facetItem = {
  type: 'facets',
  fieldName: 'section',
  label: 'Section',
  options: {
    showSublevel: true,
    exclude: ['/news/local', '/weather/local']
    // This excludes "/news/local" and all its children,
    // and "/weather/local" and all its children
    // but keeps "/news", "/news/politics", "/sports/local", etc.
  }
};

Exclude by segment name:

const facetItem = {
  type: 'facets',
  fieldName: 'section',
  label: 'Section',
  options: {
    showSublevel: true,
    exclude: ['local']
    // This excludes ALL paths containing "local" as a segment:
    // "/news/local", "/weather/local", "/sports/local", etc.
    // but keeps "/news", "/sports", "/news/politics", etc.
  }
};

Mix both approaches:

const facetItem = {
  type: 'facets',
  fieldName: 'section',
  label: 'Section',
  options: {
    showSublevel: true,
    exclude: ['/news', 'local', '/weather/colorado']
    // Excludes "/news" and all its children
    // 'local' excludes '/news/local', '/local', '/weather/local'
    // '/weather/colorado' excludes just '/weather/colorado'
  }
};

NumericFilterItem

Renders a numeric slider component for the specified index field fieldName.

{
  fieldName: string;
  type: 'numericRange';
  label: string;
  options: {
    min: number;
    max: number;
    granularity: number;
  };
}

DateRangeFilterItem

Renders a date range slider component for the specified index field fieldName.

{
  fieldName: string;
  type: 'dateRange';
  label: string;
  options: {
    minDate: Date;
    maxDate?: Date;
    granularity: 'year' | 'month' | 'day' | 'hour';
  };
}

ExactMatchToggleFilterItem

Renders a toggle switch to toggle exact matching on/off.

{
  type: 'exactMatchToggle';
  label: string;
  options: {
    subLabel?: string;
  };
}

MostRecentToggleFilterItem

Renders a toggle switch to toggle the sort by most recent on/off.

{
  fieldName: string;
  type: 'mostRecentToggle';
  label: string;
  options: {
    subLabel?: string;
  };
}