AccordionFacets

Anatomy

RequestResponse

import { AccordionFacets } from '@sitecore-search/ui';

const MyAccordionFacetsComponent = () => (
  <AccordionFacets.Root>
        <AccordionFacets.Facet>
            <AccordionFacets.Header>
                <AccordionFacets.Trigger>Header</AccordionFacets.Trigger>
            </AccordionFacets.Header>
            <AccordionFacets.Content>
                <AccordionFacets.ValueList>
                    <AccordionFacets.Item>
                        <AccordionFacets.ItemCheckbox>
                            <AccordionFacets.ItemCheckboxIndicator><CheckIcon /></AccordionFacets.ItemCheckboxIndicator>
                        </AccordionFacets.ItemCheckbox>
                        <AccordionFacets.ItemLabel>Facet Value Checkbox Label</AccordionFacets.ItemLabel>
                    </AccordionFacets.Item>
                </AccordionFacets.ValueList>
            </AccordionFacets.Content>
        </AccordionFacets.Facet>

        <AccordionFacets.Facet>
            <AccordionFacets.Header>
                <AccordionFacets.Trigger>Header 2</AccordionFacets.Trigger>
            </AccordionFacets.Header>
            <AccordionFacets.Content>
                <AccordionFacets.ValueList>
                    <AccordionFacets.Item>
                        <AccordionFacets.ItemToggle>
                            <AccordionFacets.ItemLabel>Facet Value Toggle Label</AccordionFacets.ItemLabel>
                        </AccordionFacets.ItemToggle>
                    </AccordionFacets.Item>
                </AccordionFacets.ValueList>
            </AccordionFacets.Content>
        </AccordionFacets.Facet>
    </AccordionFacets.Root>
);

Using the component

The following tabs show the screenshot and describe use of the AccordionFacets primitive component.

API Reference

This section describes the component or component parts displayed in the anatomy structure. For every component, you will find:

Components to which you can add it as a child.
Components you can add as its child.
Details of any properties you can set.

AccordionFacets.Root

The AccordionFacets.Root component contains all the parts of an accordion.

Children: AccordionFacets.Facet

Name	Description
`onFacetClick`	The callback that fires when user click on any facet value item.
`facetTypesExpandedList`	The controlled stateful value of the accordion items whose contents are expanded.
`defaultFacetTypesExpandedList`	The value of the items whose contents are expanded when the accordion is initially rendered. Use `defaultFacetTypesExpandedList` if you do not want to control the state of an accordion.
`onFacetTypesExpandedListChange`	The callback that fires when the state of the accordion changes.

AccordionFacets.Facet

The AccordionFacets.Facet component contains all the parts of a collapsible section.

Parent: AccordionFacets.Root

Children: AccordionFacets.Header and AccordionFacets.Content

Name	Description
`asChild`	Changes the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.

AccordionFacets.Header

The AccordionFacets.Header component wraps an AccordionFacets.Trigger. Use the asChild property to update it to the appropriate heading level for your page.

Parent: AccordionFacets.Facet

Children: AccordionFacets.Trigger

Name	Description
`asChild`	Changes the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.

AccordionFacets.Trigger

The AccordionFacets.Trigger toggles the collapsed state of its associated item.

Parent: AccordionFacets.Header

Name	Description
`asChild`	Changes the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.

AccordionFacets.Content

The AccordionFacets.Content contains the collapsible content for an item.

Parent: AccordionFacets.Facet

Children: AccordionFacets.ValueList

Name	Description
`asChild`	Changes the component to the HTML tag or custom component of the only child. This will merge the original component props with the props of the supplied element/component and change the underlying DOM node.

AccordionFacets.ValueList

The AccordionFacets.ValueList contains the complete list of facet values.

Parent: AccordionFacets.Content

Children: AccordionFacets.Item

AccordionFacets.Item

The AccordionFacets.Item contains the logic for the facet value item.

Parent: AccordionFacets.ValueList

Children: AccordionFacets.Checkbox, AccordionFacets.ItemLabel, and AccordionFacets.ItemToggle

AccordionFacets.ItemCheckbox

The AccordionFacets.ItemCheckbox contains all the parts of a checkbox.

Parent: AccordionFacets.ValueList

Children: AccordionFacets.Checkbox

AccordionFacets.ItemCheckboxIndicator

The AccordionFacets.ItemCheckboxIndicator renders when the checkbox is in a selected or indeterminate state. You can style this element directly, or you can use it as a wrapper to put an icon into, or both.

Parent: AccordionFacets.Checkbox

AccordionFacets.ItemLabel

The AccordionFacets.ItemLabel renders an accessible label associated with controls. It could contain an icon or text.

Parent: AccordionFacets.Item

AccordionFacets.ItemToggle

The AccordionFacets.ItemToggle can contain an icon or text.