---
title: Display a facet based on the selection of another facet
slug: latest-display-facet-based-on-selection-of-another-facet
canonical_url: https://docs.coveo.com/en/quantic/latest/usage/display-facet-based-on-selection-of-another-facet/
collection: quantic
source_format: adoc
---
# Display a facet based on the selection of another facet

To display a facet based on the selection of another facet, use the `dependsOn` property of the [`QuanticFacet`](https://docs.coveo.com/en/quantic/latest/reference/search-components/search-facet/), [`QuanticCategoryFacet`](https://docs.coveo.com/en/quantic/latest/reference/search-components/search-category-facet/), [`QuanticDateFacet`](https://docs.coveo.com/en/quantic/latest/reference/search-components/search-date-facet/), [`QuanticNumericFacet`](https://docs.coveo.com/en/quantic/latest/reference/search-components/search-numeric-facet/), or [`QuanticTimeframeFacet`](https://docs.coveo.com/en/quantic/latest/reference/search-components/search-timeframe-facet/) component.
This is useful when you want to filter options in one facet based on the selection made in another facet.
For example, if you have a facet for **Category** and another for **Subcategory**, you can use the `dependsOn` property to display only the relevant subcategories based on the selected category.

> **Important**
>
> At present, dependencies can only be set on a basic (`QuanticFacet`) or category (`QuanticCategoryFacet`) facet.
> Dependencies on numeric (`QuanticNumericFacet`), timeframe (`QuanticTimeframeFacet`), and date (`QuanticDateFacet`) facets aren't supported.

The `dependsOn` property is an object that contains two values:

* `parentFacetId`: The ID of the parent facet that the child facet depends on.

* `expectedValue` (optional): The value that must be selected in the parent facet for the child facet to be displayed.
If omitted or set to `undefined`, the child facet displays whenever any value is selected in the parent facet.

## Implementation example

The following example shows how to implement conditional facets by creating a parent facet and a dependant child facet that appears based on the parent's selection.

### HTML file

```html
<!-- myComponent.html -->
<c-quantic-facet
    facet-id="mySource" <1>
    field="source"
    label="Source"
    engine-id={engineId}
></c-quantic-facet>

<c-quantic-facet
    facet-id="myFileType" <1>
    field="filetype"
    label="File Type"
    engine-id={engineId}
    depends-on={facetDependency} <2>
></c-quantic-facet>
```

<1> Create a parent facet (`mySource`) and a child facet (`myFileType`) in your component.

<2> Set the `depends-on` attribute (corresponding to the `dependsOn` property) of the child facet to an object containing the ID of the parent facet and, optionally, the expected value from the parent facet.

### JavaScript file

```javascript
// myComponent.js
import { LightningElement } from 'lwc';

export default class MyComponent extends LightningElement {
    facetDependency = {
        parentFacetId: 'mySource', <1>
        expectedValue: 'desiredValue' <2>
        // Replace with an actual value from the parent facet.
    };
}
```

<1> Set the `parentFacetId` object value to the ID of the parent facet that the child facet depends on.

<2> Set the `expectedValue` object value to the value that must be selected in the parent facet for the child facet to be displayed.
If omitted or set to `undefined`, the child facet displays whenever any value is selected in the parent facet.