Facets

Search Web Components provides four facet widgets. Each widget has a component of the same name, placed as a block, a Canvas component, or from Twig.

Widget	Element	What the visitor sees
Search Web Components: Button	facet-button	One button per option.
Search Web Components: Checkbox	facet-checkbox	One checkbox per option, or radios with Use radio inputs (useRadios).
Search Web Components: Dropdown	facet-dropdown	The browser's own select element, one option at a time.
Search Web Components: Dropdown HTML	facet-dropdown-html	A dropdown built from HTML that a theme can style, one option at a time, or several with Allow selecting multiple values (multipleSelect).
Search Web Components: Range	facet-range	A range on a numeric field: two inputs, or a slider with two thumbs and a histogram of the results. See Range.

Hierarchy

With Use hierarchy on the facet, the Search Web Components: Checkbox and Search Web Components: Button widgets show child options under their parent.

• With Always expand hierarchy on, the children show from the start.
• With Always expand hierarchy off, a parent's children show once the parent or one of its children is applied.

One option at a time

Check Ensure that only one result can be displayed (showOnlyOneResult) on the facet to limit a visitor to one option at a time. Applying an option replaces the one already applied. Applying it again removes it. In a hierarchy, the option's parents and children stay applied.

Range

Search Web Components: Range filters a numeric field by a lowest and a highest value.

The applied range is one value in the page URL, the two bounds joined by two dots: f[price]=10..50. A bound left empty is open: f[price]=10.. is everything from 10, and f[price]=..50 everything up to 50. An open bound stays open as the results change.

Step moves the thumbs. The inputs take any number.

search-applied-facets shows the applied range as the widget's Applied range text settings spell it: $10 to $50, From $10, or Up to $50. Value prefix and Value suffix print on each bound.

Leave the facet's Operator at OR. With AND, the response carries only the values inside the applied range, so the visitor cannot widen the range again.

The slider and the histogram are drawn in the page's text color. For how a theme restyles them, see Styling.

URL alias

A facet's URL alias is its name in the page URL, e.g., category in f[category]=Desserts.

Where a setting comes from

The facet's settings travel with each response, and the component applies them. The component's own attributes apply only where the facet has no setting. With preferAttributes on, the component applies its attributes and ignores the facet's settings.

preferAttributes is:

• Prefer attributes on the Canvas component.
• Prefer attribute values configured here over facet configuration on a facet block with Remote/Other as its endpoint. With a site endpoint, the block has no attribute settings and the facet decides everything.
• preferAttributes from Twig.

The facet settings, and the attribute each one wins over unless preferAttributes is on:

Facet setting	Attribute
Show title of facet	showLabel
Ensure that only one result can be displayed	showOnlyOneResult
Show the amount of results	showCount
Show reset button in facet	showReset
Reset text	resetText
Collapsible	collapsible
Close collapsible facet by default	closed
Show applied options count in collapsible facet label	showCountInCollapseLabel
Soft limit settings: Limit, Show less label, Show more label	softLimit, softLimitLessLabel, softLimitMoreLabel
Use radio inputs	useRadios
Select label	selectLabel on facet-dropdown, htmlSelectLabel on facet-dropdown-html
Required	required
Allow selecting multiple values	multipleSelect
On the Range widget, Display, Step, Lowest value, Highest value, Value prefix, Value suffix, Apply on change, Lowest value label, Highest value label, Apply button text, Applied range text, Applied range text without an upper bound, Applied range text without a lower bound, Show histogram, Histogram interval, Scale	type, step, min, max, valuePrefix, valueSuffix, applyOnChange, minLabelText, maxLabelText, applyText, appliedRangeText, appliedRangeFromText, appliedRangeToText, showHistogram, histogramInterval, histogramScale

For what the response holds, see The response.