atomic-facet

This is for:

Developer

In this article

Properties
Shadow Parts
CSS Custom Content

A facet is a list of values for a certain field occurring in the results, ordered using a configurable criteria (for example, number of occurrences). An atomic-facet displays a facet of the results for the current query.

Properties

Property Attribute Description Type Default

Property	Attribute	Description	Type	Default
`delimitingCharacter`	`delimiting-character`	The character that separates values of a multi-value field.	`string`	`'>'`
`displayValuesAs`	`display-values-as`	Whether to display the facet values as checkboxes (multiple selection), links (single selection) or boxes (multiple selection). Possible values are 'checkbox', 'link', and 'box'.	`"box" \| "checkbox" \| "link"`	`'checkbox'`
`facetId`	`facet-id`	Specifies a unique identifier for the facet.	`string \| undefined`
`field` (required)	`field`	The field whose values you want to display in the facet.	`string`
`filterFacetCount`	`filter-facet-count`	Whether to exclude the parents of folded results when estimating the result count for each facet value.	`boolean`	`true`
`injectionDepth`	`injection-depth`	The maximum number of results to scan in the index to ensure that the facet lists all potential facet values. Note: A high injectionDepth may negatively impact the facet request performance. Minimum: `0`	`number`	`1000`
`isCollapsed`	`is-collapsed`	Specifies if the facet is collapsed.	`boolean`	`false`
`label`	`label`	The non-localized label for the facet.	`string`	`'no-label'`
`numberOfValues`	`number-of-values`	The number of values to request for this facet. Also determines the number of additional values to request each time more values are shown.	`number`	`8`
`sortCriteria`	`sort-criteria`	The sort criterion to apply to the returned facet values. Possible values are 'score', 'alphanumeric', 'occurrences', and 'automatic'.	`"alphanumeric" \| "automatic" \| "occurrences" \| "score"`	`'automatic'`
`withSearch`	`with-search`	Whether this facet should contain a search box. When "true", the search is only enabled when more facet values are available.	`boolean`	`true`

delimitingCharacter

delimiting-character

The character that separates values of a multi-value field.

string

'>'

displayValuesAs

display-values-as

Whether to display the facet values as checkboxes (multiple selection), links (single selection) or boxes (multiple selection). Possible values are 'checkbox', 'link', and 'box'.

"box" | "checkbox" | "link"

'checkbox'

facetId

facet-id

Specifies a unique identifier for the facet.

string | undefined

field (required)

field

The field whose values you want to display in the facet.

string

filterFacetCount

filter-facet-count

Whether to exclude the parents of folded results when estimating the result count for each facet value.

boolean

true

injectionDepth

injection-depth

The maximum number of results to scan in the index to ensure that the facet lists all potential facet values. Note: A high injectionDepth may negatively impact the facet request performance. Minimum: 0

number

1000

isCollapsed

is-collapsed

Specifies if the facet is collapsed.

boolean

false

label

The non-localized label for the facet.

string

'no-label'

numberOfValues

number-of-values

The number of values to request for this facet. Also determines the number of additional values to request each time more values are shown.

number

8

sortCriteria

sort-criteria

The sort criterion to apply to the returned facet values. Possible values are 'score', 'alphanumeric', 'occurrences', and 'automatic'.

"alphanumeric" | "automatic" | "occurrences" | "score"

'automatic'

withSearch

with-search

Whether this facet should contain a search box. When "true", the search is only enabled when more facet values are available.

boolean

true

Shadow Parts

Part Description

Part	Description
`clear-button`	The button that resets the actively selected facet values.
`clear-button-icon`	The clear button icon.
`facet`	The wrapper for the entire facet.
`label-button`	The button that displays the label and allows to expand/collapse the facet.
`label-button-icon`	The label button icon.
`matches-query`	The highlighted query inside the matches labels.
`more-matches`	The label indicating there are more matches for the current facet search query.
`no-matches`	The label indicating there are no matches for the current facet search query.
`placeholder`	The placeholder shown before the first search is executed.
`ripple`	The ripple effect of the component’s interactive elements.
`search-clear-button`	The button to clear the search box of input.
`search-highlight`	The highlighted query inside the facet values.
`search-icon`	The search box submit button.
`search-input`	The search box input.
`show-less`	The show less results button.
`show-more`	The show more results button.
`show-more-less-icon`	The icons of the show more & show less buttons.
`value-box`	The facet value when display is 'box'.
`value-checkbox`	The facet value checkbox, available when display is 'checkbox'.
`value-checkbox-label`	The facet value checkbox clickable label, available when display is 'checkbox'.
`value-count`	The facet value count, common for all displays.
`value-label`	The facet value label, common for all displays.
`value-link`	The facet value when display is 'link'.
`values`	The facet values container.

clear-button

The button that resets the actively selected facet values.

clear-button-icon

The clear button icon.

facet

The wrapper for the entire facet.

label-button

The button that displays the label and allows to expand/collapse the facet.

label-button-icon

The label button icon.

matches-query

The highlighted query inside the matches labels.

more-matches

The label indicating there are more matches for the current facet search query.

no-matches

The label indicating there are no matches for the current facet search query.

placeholder

The placeholder shown before the first search is executed.

ripple

The ripple effect of the component’s interactive elements.

search-clear-button

The button to clear the search box of input.

search-highlight

The highlighted query inside the facet values.

search-icon

The search box submit button.

search-input

The search box input.

show-less

The show less results button.

show-more

The show more results button.

show-more-less-icon

The icons of the show more & show less buttons.

value-box

The facet value when display is 'box'.

value-checkbox

The facet value checkbox, available when display is 'checkbox'.

value-checkbox-label

The facet value checkbox clickable label, available when display is 'checkbox'.

value-count

The facet value count, common for all displays.

value-label

The facet value label, common for all displays.

value-link

The facet value when display is 'link'.

values

The facet values container.

CSS Custom Content

Name Description

Name	Description
`--atomic-facet-boxes-gap`	Gap value for facet values, when the display is 'box'
`--atomic-facet-boxes-per-row`	Number of facet values to display per row, when the display is 'box'
`--atomic-facet-checkbox-size`	Size of the checkbox.
`--atomic-facet-search-clear-icon-size`	The size of the facet search clear icon.
`--atomic-facet-search-icon-size`	The size of the facet search icon.

--atomic-facet-boxes-gap

Gap value for facet values, when the display is 'box'

--atomic-facet-boxes-per-row

Number of facet values to display per row, when the display is 'box'

--atomic-facet-checkbox-size

Size of the checkbox.

--atomic-facet-search-clear-icon-size

The size of the facet search clear icon.

--atomic-facet-search-icon-size

The size of the facet search icon.