---
title: Facet types
slug: '1554'
canonical_url: https://docs.coveo.com/en/1554/
collection: build-a-search-ui
source_format: adoc
---
# Facet types
When building a [search interface](https://docs.coveo.com/en/2741/), it's important to add [facets](https://docs.coveo.com/en/198/) that are appropriate to the experience you want to provide to your users.
This article describes each type of facet available in the JavaScript Search Framework.

## Dynamic facets (recommended)

A dynamic facet leverages [Coveo Machine Learning](https://docs.coveo.com/en/188/) [Dynamic Navigation Experience (DNE)](https://docs.coveo.com/en/2907/) to reorder its values based on previous end-user interactions with your Coveo-powered search interface.

You can also embed dynamic facets within a [facet manager](https://coveo.github.io/search-ui/components/dynamicfacetmanager.html) so that Coveo ML DNE can reorder the facets automatically.

### `DynamicFacet`

[.halfWidthFloatRight.bordered]


A [dynamic facet](https://docs.coveo.com/en/2917/) shows a list of values for a [field](https://docs.coveo.com/en/200/).
An end user can [select](https://docs.coveo.com/en/1571#selecting-several-values) one or several of these values, as well as [search for values](https://docs.coveo.com/en/1571#searching-for-values).

Dynamic facets support fields with the [**Facet** or **Multi-value facet** option](https://docs.coveo.com/en/1833#facet-and-multi-value-facet) enabled.

Here is an example of how to use the [`DynamicFacet`](https://coveo.github.io/search-ui/components/dynamicfacet.html) component in your markup:

```html
<div class="CoveoDynamicFacet" data-title="Type" data-field="@objecttype"></div>
```

### `DynamicFacetRange`

[.halfWidthFloatRight.bordered]


A dynamic range facet offers a list of numerical or date ranges instead of single values.
You must specify these ranges in the [`ranges`](https://coveo.github.io/search-ui/components/dynamicfacetrange.html#options.ranges) component option.

Here is an example of how to use the [`DynamicFacetRange`](https://coveo.github.io/search-ui/components/dynamicfacetrange.html) component in your markup:

```html
<div class="CoveoDynamicFacetRange" data-title="Size" data-field="@size" data-ranges="[{ &quot;start&quot; : 0 , &quot;end&quot; : 500 }, { &quot;start&quot; : 500 , &quot;end&quot; : 1000 }]"></div>
```

### `DynamicHierarchicalFacet`

[.halfWidthFloatRight.bordered]


If some of the items in your [index](https://docs.coveo.com/en/204/) follow a logical hierarchical structure, you may want to display a [dynamic hierarchical facet](https://docs.coveo.com/en/2667/) to allow end users to filter your items accordingly.
When an end user selects a value, the facet updates and shows child values.

Here is an example of how to use the [`DynamicHierarchicalFacet`](https://coveo.github.io/search-ui/components/dynamichierarchicalfacet.html) component in your markup:

```html
<div class="CoveoDynamicHierarchicalFacet" data-title="Atlas" data-field="@atlgeographicalhierarchy"></div>
```

## Regular facets

### `Facet`

A facet shows a list of values for a field.
An end user can [select](https://docs.coveo.com/en/1571#selecting-several-values) or [exclude](https://docs.coveo.com/en/1571#excluding-values) one or several of these values, as well as [search for values](https://docs.coveo.com/en/1571#searching-for-values).

Facets support fields with the [**Facet** or **Multi-value facet** option](https://docs.coveo.com/en/1833#facet-and-multi-value-facet) enabled.

The values in a facet are typically sorted from most to least frequent or arranged in either ascending or descending alphanumeric order.
You can also configure a custom sort in the [Interface Editor](https://docs.coveo.com/en/1852/).

Other customization options for facets include changing the number of values displayed in the facet and only allowing specific values to be displayed.

> **Important**
>
> If you're using a [Coveo Machine Learning](https://docs.coveo.com/en/188/) [Dynamic Navigation Experience (DNE)](https://docs.coveo.com/en/2907/) model, you must use [dynamic facets](https://docs.coveo.com/en/1554#dynamic-facets-recommended) instead of regular facets.

Here is an example of how to use the [`Facet`](https://coveo.github.io/search-ui/components/facet.html) component in your markup:

```html
<div class="CoveoFacet" data-title="Year" data-field="@year"></div>
```

### `FacetRange`

A range facet offers a list of numerical or date ranges instead of single values.
These ranges are computed from the facet field values of the [query](https://docs.coveo.com/en/231/) results.

Here is an example of how to use the [`FacetRange`](https://coveo.github.io/search-ui/components/facetrange.html) component in your markup:

```html
<div class="CoveoFacetRange" data-title="Price (USD)" data-field="@price"></div>
```

### `FacetSlider`

A slider facet contains a widget that allows end users to filter results based on a range of numerical values (for example, dates or prices).
Above the slider widget, a graph shows the relative number of results for each value.

One customization option lets you define steps for your slider facet.
This splits the range evenly into a specific number of values, and end users can only select from among these step values.
For example, if your range is `0` to `100` and you choose to use `10` steps, an end user can only move the slider in multiples of ten (for example, `0`, `10`, `20`).
You can also offer a range slider (two buttons), which allows end users to specify a beginning and ending value for the range, instead of a regular slider (one button).

Here is an example of how to use the [`FacetSlider`](https://coveo.github.io/search-ui/components/facetslider.html) component in your markup:

```html
<div class="CoveoFacetSlider" data-title="Price" data-field="@price"></div>
```

### `TimespanFacet`

A timespan facet is similar to a range facet, but it allows end users to select a range of dates rather than numerical values.

This facet only offers prebuilt ranges.
To customize your own range options, use the [range facet](#facetrange).

Here is an example of how to use the [`TimespanFacet`](https://coveo.github.io/search-ui/components/timespanfacet.html) component in your markup:

```html
<div class="CoveoTimespanFacet" data-title="Date" data-field="@date"></div>
```

### `CategoryFacet`

A category facet displays values hierarchically.
It determines which filter to apply to the search results based on the selected value path (that is, a sequence of values leading to a specific value in the hierarchy).

If some of the items in your [index](https://docs.coveo.com/en/204/) follow a logical hierarchical structure, you may want to display a category facet to allow end users to filter your items accordingly.
When an end user selects a value, the facet updates and shows child values.

Here is an example of how to use the [`CategoryFacet`](https://coveo.github.io/search-ui/components/categoryfacet.html) component in your markup:

```html
<div class="CoveoCategoryFacet" data-title="Atlas" data-field="@atlgeographicalhierarchy"></div>
```

### `SimpleFilter`




A simple filter shows a dropdown menu of values for a field.
An end user can select one or several of these values.

You can either specify the list of available field values in the [`values`](https://coveo.github.io/search-ui/components/simplefilter.html#options.values) component option, or dynamically get the available field values through a [`GroupByRequest`](https://coveo.github.io/search-ui/interfaces/igroupbyrequest.html) operation performed at the same time as the main query.

Here is an example of how to use the [`SimpleFilter`](https://coveo.github.io/search-ui/components/simplefilter.html) component in your markup:

```html
<div class="CoveoSimpleFilter" data-title="File Type" data-field="@filetype"></div>
```

## What's next?

Continue editing your search interface using the [Interface Editor](https://docs.coveo.com/en/1852/).