---
title: Coveo Facet
slug: '3027'
canonical_url: https://docs.coveo.com/en/3027/
collection: coveo-for-sitecore-v5
source_format: adoc
---
# Coveo Facet
> **Legacy feature**
>
> The Coveo Hive Framework is now in maintenance mode and is no longer recommended for new implementations.
> 
> To build new search experiences, use one of Coveo's more modern, lightweight, and responsive libraries.
> To get started, see the [Build search](https://docs.coveo.com/en/2473/) article.

> **Leading practice**
>
> The [Coveo Dynamic Facet](https://docs.coveo.com/en/3206/) is now recommended over the **Coveo Facet** rendering.

Implements the [Coveo JavaScript Search Framework](https://docs.coveo.com/en/187/) [Facet](https://coveo.github.io/search-ui/components/facet.html) component to allow filtering of results on one or multiple values of a field.

## Usage notes

* The field selected in the `Field` data source option must be facetable (see [Make a Sitecore field facetable](https://docs.coveo.com/en/2375/)).

* Any change to the facet value selections triggers a new Search API call.

## Insertion location


<div>
<h3>Coveo Hive</h3>
  <p>The <strong>Coveo Facet</strong> rendering is an Allowed Control in the following placeholder(s): <code class="highlighter-rouge">Facets</code></p>
  <video width="690" height="335" controls="">
  <source src="{{ site.baseurl }}/assets/images/c4sc-v5/facet-hive.mp4" type="video/mp4" />
  Your browser doesn't support the video tag.
</video>
  <div class="figure-caption">Example insertion sequence for the <strong>Coveo Facet</strong> rendering.
  </div>
</div>
<div>
<h3>Coveo Hive SXA</h3>
  <p>Coveo for Sitecore SXA rendering insertion locations aren't limited by placeholder Allowed Controls. The <strong>Coveo Facet</strong> rendering may therefore be inserted throughout the partial design, whether in Coveo for Sitecore or Sitecore placeholders.</p>
  <video width="690" height="335" controls="">
  <source src="{{ site.baseurl }}/assets/images/c4sc-v5/facet-sxa.mp4" type="video/mp4" />
  Your browser doesn't support the video tag.
</video>
  <div class="figure-caption">Example insertion sequence for the <strong>Coveo Facet</strong> rendering.
  </div>
</div>

## Data source options

The following table lists the available data source options for this rendering.

[%header,cols="33%,66%"]
|===
|Option name
|Description

|Title
|See the [title](https://coveo.github.io/search-ui/components/facet.html#options.title) component option.

|Field
|See the [field](https://coveo.github.io/search-ui/components/facet.html#options.field) component option.

|Facet ID
|See the [id](https://coveo.github.io/search-ui/components/facet.html#options.id-1) component option.

|Number of values
|See the [numberOfValues](https://coveo.github.io/search-ui/components/facet.html#options.numberofvalues) component option.

|Sort
|See the [sortCriteria](https://coveo.github.io/search-ui/components/facet.html#options.sortcriteria) component option.

|Ignore accents in facet search
|See the [facetSearchIgnoreAccents](https://coveo.github.io/search-ui/components/facet.html#options.facetsearchignoreaccents) component option.

|Allowed facet values
|See the [`allowedValues`](https://coveo.github.io/search-ui/components/facet.html#options.allowedvalues) component option.

|Facet value caption
|See the [`valueCaption`](https://coveo.github.io/search-ui/components/facet.html#options.valuecaption) component option.

|Enable collapse button
|See the [`enableCollapse`](https://coveo.github.io/search-ui/components/facet.html#options.enablecollapse) component option.

|Enable settings button
|See the [`enableSettings`](https://coveo.github.io/search-ui/components/facet.html#options.enablesettings) component option.

|Sort criteria displayed in the settings menu
|See the [`availableSorts`](https://coveo.github.io/search-ui/components/facet.html#options.availablesorts) component option.

|Enable search for the facet
|See the [enableFacetSearch](https://coveo.github.io/search-ui/components/facet.html#options.enablefacetsearch) component option.

|Number of values to display in the facet search results
|See the [numberOfValuesInFacetSearch](https://coveo.github.io/search-ui/components/facet.html#options.numberofvaluesinfacetsearch) component option.

|Enable more/less button
|See the [enableMoreLess](https://coveo.github.io/search-ui/components/facet.html#options.enablemoreless) component option.

|Number of additional facet values to fetch when 'More' is clicked
|See the [pageSize](https://coveo.github.io/search-ui/components/facet.html#options.pagesize) component option.

|Include facet values in the omnibox
|Don't use this option.
It is only exposed for legacy reasons.

|Include facet values in the breadcrumb
|See the [includeInBreadcrumb](https://coveo.github.io/search-ui/components/facet.html#options.includeinbreadcrumb) component option.

|Maximum number of facet values displayed in the breadcrumb
|See the [numberOfValuesInBreadcrumb](https://coveo.github.io/search-ui/components/facet.html#options.numberofvaluesinbreadcrumb) component option.

|Computed field
|See the [`computedField`](https://coveo.github.io/search-ui/components/facet.html#options.computedfield) component option.
Not to be confused with a Sitecore computed index field.

|Computed field operation
|See the [computedFieldOperation](https://coveo.github.io/search-ui/components/facet.html#options.computedfieldoperation) component option.

|Computed field format
|See the [computedFieldFormat](https://coveo.github.io/search-ui/components/facet.html#options.computedfieldformat) component option.

|Computed field caption
|See the [computedFieldCaption](https://coveo.github.io/search-ui/components/facet.html#options.computedfieldcaption) component option.

|Is multi-value field
|See the [isMultiValueField](https://coveo.github.io/search-ui/components/facet.html#options.ismultivaluefield) component option.

|Facet uses the AND operator
|See the [`useAnd`](https://coveo.github.io/search-ui/components/facet.html#options.useand) component option.

|Allows user to select the facet operator
|See the [enableTogglingOperator](https://coveo.github.io/search-ui/components/facet.html#options.enabletogglingoperator) component option.

|Facet accuracy determined by the number of scanned results
|See the [injectionDepth](https://coveo.github.io/search-ui/components/facet.html#options.injectiondepth) component option.

|Enable 'Save Facet State' option in Settings menu
|See the [enableSettingsFacetState](https://coveo.github.io/search-ui/components/facet.html#options.enablesettingsfacetstate) component option.

|Preserve facet position under mouse on new facet query
|See the [`preservePosition`](https://coveo.github.io/search-ui/components/facet.html#options.preserveposition) component option.

|DOM unique ID
a|{empty}
--
Randomly generated HTML element ID.
--

|Additional data attributes
a|{empty}
--
Allows [use of the Coveo JavaScript Search Framework **Facet** component options](https://docs.coveo.com/en/2776/) that aren't directly available in the data source.
--
|===

## Sample generated HTML and corresponding visual output

```html
<div id="coveo493E5F13" class="CoveoFacet"
data-available-sorts="alphaascending,alphadescending,occurrences,score"
data-prebind-field="fieldTranslator" data-field="@z95xtemplatename" data-id="templatename"
data-injection-depth="1000" data-sort-criteria="occurrences" data-title="Template Name"
data-applied-prebind="true">
```

![Image showing text facet in published search page | Coveo for Sitecore 5](https://docs.coveo.com/en/assets/images/c4sc-v5/basic-facet-output.png)