Refinement List

The Refinement List component header, .inbenta-search-filters__header, contains a .inbenta-search-filters__clean element, allowing users all the active filters ().

Every filter group is nested inside a .inbenta-search-filters__group element. It has two elements:

A group name header in .inbenta-search-filters__group__header. It has three elements:
- The title of the group: .inbenta-search-filters__group__title.
- The button to minimize the filters group: .group__action--minimize.
- The button to maximize the filters group: .group__action--maximize.
A filter value nested inside .inbenta-search-filters__values. It has three elements:
- A label: .value__label.
- An input box to select the filter: .value__checkbox. When a filter is checked, the class .value--active is added.
- A counter: .value__badge.

Component image

HTML structure


<div class="inbenta-search-filters">
    <div class="inbenta-search-filters__header">
        <div class="header__title">FILTERS</div> 
        <div class="header__actions">
            <i class="header__actions--clean inbenta-search-icon"></i> 
            <button class="inbenta-search-icon header__actions--maximize"></button>
        </div>
    </div>
    <div class="inbenta-search-filters__group">
        <div class="group__header">
            <div class="group__title">
                Title of group of filters
            </div>
            <i class="group__action group__action--minimize inbenta-search-icon"></i>
        </div>
        <div class="inbenta-search-filters__values">
            <div class="value">
                <label class="value__label">
                    <input class="inbenta-search-checkbox value__checkbox inbenta-search-icon">
                </label>
                <div class="value__label">
                    <label class="value__label">
                        Filter
                        <small class="value__badge"> 100 </small>
                    </label>
                </div>
            </div>
        </div>
    </div>
    ...
    <button class="inbenta-search-button--secondary inbenta-search-filters__more-values">Show more</button>
</div>

CSS editable properties

Class	Css
`.inbenta-search-filters`	position, height, padding, background, border, box-shadow
`.inbenta-search-filters__header`	structure, font, line-height, color, letter-spacing
`.inbenta-search-filters__header .header__title`	structure, font, line-height, color, letter-spacing
`.inbenta-search-filters .header__actions`	structure, font, line-height, color, letter-spacing
`.inbenta-search-filters__header .header__actions--clean`	color, pseudo-class(before): font, content
`.header__actions--maximize / header__actions--minimize`	color, pseudo-class(before): font, content
`.inbenta-search-filters__group .group__header`	This element is strictly structural
`.inbenta-search-filters__group .group__title`	font, color, word-break
`.group__action .group__action--minimize`, `.group__action .group__action--maximize`	padding, color, pseudo-class(before): font, content
`.inbenta-search-filters .value value--active value__check`	background, border, pseudo-class(before): font, content
`.inbenta-search-filters .value__check`	border
`.inbenta-search-filters .values__label`	font, color
`.inbenta-search-filters__more-values`	padding, background, border, text-align, font, color, line-height, pseudo-class(hover): color

APIs and SDKs

General

Rate Limits

Errors

Authorization

API Authorization

User Authorization

API Resources

Security

Tracking

Reporting

NL Interpreter

NL Interpreter Overview

NL Interpreter API

Chatbot

Chatbot Overview

Chatbot API

Editor API

Chatbot JS SDK

Language Detection

Knowledge

Knowledge Overview

Knowledge API

Editor API

Knowledge JS SDK

Language Detection

Search

Search Overview

Search API

Search JS SDK

Language Detection

Messenger

Messenger Overview

Messenger API

Messenger JS SDK

HyperChat API

HyperChat JS SDK

Refinement List

Component image

HTML structure

CSS editable properties