InstantSearch specs

✏️ edit page

ToggleRefinement

Widget example

HTML output

<div class="ais-ToggleRefinement">
  <label class="ais-ToggleRefinement-label">
    <input class="ais-ToggleRefinement-checkbox" type="checkbox" value="Free Shipping" />
    <span class="ais-ToggleRefinement-labelText">Free Shipping</span>
  </label>
</div>

CSS classes

Hint: hover classes below to see their position.

name description
.ais-ToggleRefinement the root div of the widget
.ais-ToggleRefinement-label the label of the toggle
.ais-ToggleRefinement-checkbox the checkbox input of the toggle
.ais-ToggleRefinement-labelText the label text of the toggle
.ais-ToggleRefinement-count the count of items of the toggle

Options

Note: this is a guideline for new InstantSearch flavours, not a rule.

name default value description
attribute Attribute to apply the filter to
on Refinement to enable if this widget is checked
off Refinement to enable if this widget is not checked

Translations

Note: there are no translations for this widget