Filter group
Role attribute
Every instance of this component carries:
wf-algolia-elementfilter-groupVariants
This component ships in several presets.
Checkbox
Facet attribute to filter on, e.g. "category".
Algolia index this filter group queries.
Combine selected values with "or" (any match) or "and" (all match).
Initial pre-selected facet value.
Override the display heading shown above this filter group (heading-only).
Label for the "show more" trigger.
Label for the "show less" trigger.
Defer applying selections until a wf-algolia-button="apply" is clicked.
Override the global debounce (ms) for this group's inputs.
Dynamic facet field name. Alternative to wf-algolia-field for dynamically-loaded facet lists.
Hierarchical group identifier; referenced by child groups via wf-algolia-refines.
Names the parent group-id this filter cascades under: this group is a child whose options re-query scoped to the parent group’s current selection. Enables N-level hierarchical (cascading) filters.
How this group behaves until its parent (wf-algolia-refines) has a selection: "hide" (hidden until the parent is picked) or "disable" (greyed/disabled until the parent is picked).
URL template for leaf-item clicks in standalone (non-browse) filter groups.
Cleans the value into a URL-friendly slug before it goes into the link. Example: "Creative & Brand" becomes creative-brand. Off by default.
Hierarchical facet label display: "leaf" renders only the deepest path segment (e.g. "Paid Search" instead of "Paid Media > Paid Search"); "full" renders the whole value (default).
Reorder the filter-items in this group. "alpha" sorts A→Z by the stored value (case-insensitive); "count" sorts by descending result count; "selected-first" floats checked values to the top; "selected-alpha-zero-last" floats selected items up, sorts the rest A→Z, and sinks zero-result values to the bottom; "natural" (default) keeps DOM order. Applied whenever results update - a dynamically-populated list briefly paints in the default count order until the first response sorts it.
Class applied while this filter has zero matching results.
What clicking an item in this filter group does - filter the results, navigate to a link, or nothing.
The control style of this filter group: checkbox, radio, select, range or toggle.
How many filter items to show before the show-more trigger hides the rest.
Set to "local" to match the filter-search input against already-loaded values instead of querying Algolia for facet values.
Set to "true" to keep a selected value visible even when the latest results no longer contain it, so the user can still clear it.
Radio
Facet attribute to filter on.
Algolia index this filter group queries.
Marks the "All" option in a radio group (re-selected when the field is cleared). Renamed from wf-algolia-reset (deprecated alias).
Combine selected values with "or" (any) or "and" (all).
Defer applying selections until a wf-algolia-button="apply" is clicked.
Override the global debounce (ms) for this group's inputs.
Dynamic facet field name. Alternative to wf-algolia-field for dynamically-loaded facet lists.
Hierarchical group identifier; referenced by child groups via wf-algolia-refines.
Names the parent group-id this filter cascades under: this group is a child whose options re-query scoped to the parent group’s current selection. Enables N-level hierarchical (cascading) filters.
How this group behaves until its parent (wf-algolia-refines) has a selection: "hide" (hidden until the parent is picked) or "disable" (greyed/disabled until the parent is picked).
URL template for leaf-item clicks in standalone (non-browse) filter groups.
Cleans the value into a URL-friendly slug before it goes into the link. Example: "Creative & Brand" becomes creative-brand. Off by default.
Hierarchical facet label display: "leaf" renders only the deepest path segment (e.g. "Paid Search" instead of "Paid Media > Paid Search"); "full" renders the whole value (default).
Reorder the filter-items in this group. "alpha" sorts A→Z by the stored value (case-insensitive); "count" sorts by descending result count; "selected-first" floats checked values to the top; "selected-alpha-zero-last" floats selected items up, sorts the rest A→Z, and sinks zero-result values to the bottom; "natural" (default) keeps DOM order. Applied whenever results update - a dynamically-populated list briefly paints in the default count order until the first response sorts it.
Class applied while this filter has zero matching results.
What clicking an item in this filter group does - filter the results, navigate to a link, or nothing.
The control style of this filter group: checkbox, radio, select, range or toggle.
How many filter items to show before the show-more trigger hides the rest.
Set to "local" to match the filter-search input against already-loaded values instead of querying Algolia for facet values.
Set to "true" to keep a selected value visible even when the latest results no longer contain it, so the user can still clear it.
Range
Numeric facet attribute to filter on.
Algolia index this filter group queries.
Display format for the range values.
Defer applying selections until a wf-algolia-button="apply" is clicked.
Override the global debounce (ms) for this group's inputs.
Dynamic facet field name. Alternative to wf-algolia-field for dynamically-loaded facet lists.
Hierarchical group identifier; referenced by child groups via wf-algolia-refines.
Names the parent group-id this filter cascades under: this group is a child whose options re-query scoped to the parent group’s current selection. Enables N-level hierarchical (cascading) filters.
How this group behaves until its parent (wf-algolia-refines) has a selection: "hide" (hidden until the parent is picked) or "disable" (greyed/disabled until the parent is picked).
URL template for leaf-item clicks in standalone (non-browse) filter groups.
Cleans the value into a URL-friendly slug before it goes into the link. Example: "Creative & Brand" becomes creative-brand. Off by default.
Hierarchical facet label display: "leaf" renders only the deepest path segment (e.g. "Paid Search" instead of "Paid Media > Paid Search"); "full" renders the whole value (default).
Class applied while this filter has zero matching results.
What clicking an item in this filter group does - filter the results, navigate to a link, or nothing.
The control style of this filter group: checkbox, radio, select, range or toggle.
How many filter items to show before the show-more trigger hides the rest.
Set to "local" to match the filter-search input against already-loaded values instead of querying Algolia for facet values.
Set to "true" to keep a selected value visible even when the latest results no longer contain it, so the user can still clear it.
Searchable
Facet attribute to filter on (e.g. "tags").
Algolia index this filter group queries.
Debounce (ms) before firing the SFFV typeahead query (default 200).
Empty-state message; supports {query} token.
Defer applying selections until a wf-algolia-button="apply" is clicked.
Combine selected values with "or" (any match) or "and" (all match).
Class applied while the SFFV result-set is empty.
What clicking an item in this filter group does - filter the results, navigate to a link, or nothing.
The control style of this filter group: checkbox, radio, select, range or toggle.
How many filter items to show before the show-more trigger hides the rest.
Set to "local" to match the filter-search input against already-loaded values instead of querying Algolia for facet values.
Set to "true" to keep a selected value visible even when the latest results no longer contain it, so the user can still clear it.
Category list
Facet attribute to filter on, e.g. "category".
Algolia index this filter group queries.
URL template for leaf-item clicks in standalone (non-browse) filter groups.
Cleans the value into a URL-friendly slug before it goes into the link. Example: "Creative & Brand" becomes creative-brand. Off by default.
Reorder the filter-items in this group. "alpha" sorts A→Z by the stored value (case-insensitive); "count" sorts by descending result count; "selected-first" floats checked values to the top; "selected-alpha-zero-last" floats selected items up, sorts the rest A→Z, and sinks zero-result values to the bottom; "natural" (default) keeps DOM order. Applied whenever results update - a dynamically-populated list briefly paints in the default count order until the first response sorts it.
Hierarchical facet label display: "leaf" renders only the deepest path segment (e.g. "Paid Search" instead of "Paid Media > Paid Search"); "full" renders the whole value (default).
What clicking an item in this filter group does - filter the results, navigate to a link, or nothing.
The control style of this filter group: checkbox, radio, select, range or toggle.
How many filter items to show before the show-more trigger hides the rest.
Set to "local" to match the filter-search input against already-loaded values instead of querying Algolia for facet values.
Set to "true" to keep a selected value visible even when the latest results no longer contain it, so the user can still clear it.
Facet attribute to filter on, e.g. "category".
Algolia index this filter group queries.
Combine selected values with "or" (any match) or "and" (all match).
Initial pre-selected facet value.
Override the display heading shown above this filter group (heading-only).
Label for the "show more" trigger.
Label for the "show less" trigger.
Defer applying selections until a wf-algolia-button="apply" is clicked.
Override the global debounce (ms) for this group's inputs.
Dynamic facet field name. Alternative to wf-algolia-field for dynamically-loaded facet lists.
Hierarchical group identifier; referenced by child groups via wf-algolia-refines.
Names the parent group-id this filter cascades under: this group is a child whose options re-query scoped to the parent group’s current selection. Enables N-level hierarchical (cascading) filters.
How this group behaves until its parent (wf-algolia-refines) has a selection: "hide" (hidden until the parent is picked) or "disable" (greyed/disabled until the parent is picked).
URL template for leaf-item clicks in standalone (non-browse) filter groups.
Cleans the value into a URL-friendly slug before it goes into the link. Example: "Creative & Brand" becomes creative-brand. Off by default.
Hierarchical facet label display: "leaf" renders only the deepest path segment (e.g. "Paid Search" instead of "Paid Media > Paid Search"); "full" renders the whole value (default).
Reorder the filter-items in this group. "alpha" sorts A→Z by the stored value (case-insensitive); "count" sorts by descending result count; "selected-first" floats checked values to the top; "selected-alpha-zero-last" floats selected items up, sorts the rest A→Z, and sinks zero-result values to the bottom; "natural" (default) keeps DOM order. Applied whenever results update - a dynamically-populated list briefly paints in the default count order until the first response sorts it.
Class applied while this filter has zero matching results.
What clicking an item in this filter group does - filter the results, navigate to a link, or nothing.
The control style of this filter group: checkbox, radio, select, range or toggle.
How many filter items to show before the show-more trigger hides the rest.
Set to "local" to match the filter-search input against already-loaded values instead of querying Algolia for facet values.
Set to "true" to keep a selected value visible even when the latest results no longer contain it, so the user can still clear it.
Elements inside it
These roles are placed inside this component, not on their own:
filter-group
├─ filter-field-text
├─ filter-group-count
├─ filter-search
├─ filter-search-results
│ ├─ filter-search-empty
│ └─ filter-search-result-template
├─ filter-selected-count
│ └─ filter-count-text
├─ filter-selected-value
│ └─ filter-value-text-target
├─ filter-show-more
├─ filter-template
│ ├─ filter-count
│ ├─ filter-item
│ └─ filter-value-text
├─ range-display
├─ range-max
├─ range-min
└─ scope-facet
- — Element written with the group's field name / heading.
- — Element written with the number of results matching this group.
- — Typeahead input inside a filter group - SFFV by default, client-side when wf-algolia-search-mode="local".
- — Overlay container holding the typeahead results for a filter-search input.
- — Empty-state element shown when the typeahead returns no values.
- — Row template cloned once per typeahead result.
- — Outer element reflecting how many values are selected in this group; the number is written into its filter-count-text child.
- — The write target inside a filter-selected-count wrapper.
- — Outer element reflecting the selected value(s) of this group; the text is written into its filter-value-text-target child.
- — The write target inside a filter-selected-value wrapper.
- — The show-more / show-less trigger revealing items past wf-algolia-limit.
- — Row template inside a filter group, detached at scan time and cloned once per facet value.
- — Element written with the facet value's result count.
- — The clickable/checkable row itself within a cloned filter template.
- — Element written with the facet value's display label.
- — Element written with the formatted current range.
- — Upper-bound input of a range filter group.
- — Lower-bound input of a range filter group.
- — Marks a cloned subtree as scoped to one facet value, so descendants resolve their scope via closest().