Overview

The Checkbox List Facet component renders a checkbox for each facet and may be nested depending on the configuration in the Hawksearch admin.

Selector

The selector for this component is <hawksearch-checkbox-list-facet>.

Data Model

The following data model is exposed to the Handlebars template:

interface CheckboxListFacetValue extends FacetValue {
    visible: boolean;
    toggled: boolean;
    hasChildren: boolean;
    children?: Array<CheckboxListFacetValue>;
}

{
  values: Array<CheckboxListFacetValue>;
  showToggle: boolean;
  toggleText: string;
  expanded: boolean | undefined;
}

For more information, see Search Models.

Event Binding Attributes

This component supports the following attributes which are common to all Facet Type Components:

Handlebars Partials

Name	Parameter

Name	Parameter
facet-checkbox-list	`Array<FacetValueWithState>`

This partial renders a checkbox for each facet value along with any applicable actions (include, exclude, toggle).

{{#if length}}
    <ul class="checkbox-list-facet__list">
        {{#each this}}
            {{#if visible}}
                <li class="checkbox-list-facet__list__item{{attribute ' checkbox-list-facet__list__item--excluded' excluded}}{{attribute ' checkbox-list-facet__list__item--collapsible' hasChildren }}">
                    <div class="checkbox-list-facet__list__item__content">
                        {{#if selected}}
                            <input id="{{@root.id}}-{{value}}" type="checkbox" checked hawksearch-facet-value value="{{value}}" />
                        {{else}}
                            <input id="{{@root.id}}-{{value}}" type="checkbox" hawksearch-facet-value value="{{value}}" />
                        {{/if}}
                        <label for="{{@root.id}}-{{value}}" class="facet__value">
                            <span class="facet__value__title checkbox-list-facet__list__item__title">{{title}}</span>
                            <span class="facet__value__count checkbox-list-facet__list__item__count">({{count}})</span>
                        </label>
                        {{#if toggled}}
                            {{> facet-checkbox-list children}}
                        {{/if}}
                    </div>
                    <div class="checkbox-list-facet__list__item__actions">
                        {{#if excluded}}
                            <span hawksearch-facet-value-include="{{value}}" class="checkbox-list-facet__list__item__actions__item" title="Include">
                                <hawksearch-icon name="plus" class="facet__heading__actions__item"></hawksearch-icon>
                            </span>
                        {{else}}
                            <span hawksearch-facet-value-exclude="{{value}}" class="checkbox-list-facet__list__item__actions__item" title="Exclude">
                                <hawksearch-icon name="minus" class="facet__heading__actions__item"></hawksearch-icon>
                            </span>
                        {{/if}}
                        {{#if hasChildren}}
                            <span hawksearch-facet-value-toggle="{{value}}" class="checkbox-list-facet__list__item__actions__item" title="Toggle">
                                <hawksearch-icon name="{{if-else toggled 'chevron-down' 'chevron-right'}}" class="facet__heading__toggle"></hawksearch-icon>
                            </span>
                        {{/if}}
                    </div>
                </li>
            {{/if}}
        {{/each}}
    </ul>
{{/if}}

Hawksearch Handlebars UI

Checkbox List Facet Component

Analytics

Overview

Selector

Data Model

Event Binding Attributes

Handlebars Partials

Default Template

Related content