Widgets ToggleRefinement


The ToggleRefinement provides an on/off filtering feature based on an attribute value.


To use this widget, you’ll need an attribute to toggle on.

You can’t toggle on null or not-null values. If you want to address this particular use-case you’ll need to compute an extra boolean attribute saying if the value exists or not. See this thread for more details.


type: string 

Name of the attribute on which to apply the value refinement. Required when value is present.

type: string 

Label for the toggle.

type: any 

Value of the refinement to apply on attribute when checked.

type: booleandefault: false

Default state of the widget. Should the toggle be checked by default?

Example usage

import React from 'react'; import { InstantSearch, ToggleRefinement } from 'react-instantsearch-dom'; const App = () => ( <InstantSearch appId="latency" apiKey="6be0576ff61c053d5f9a3225e2a90f76" indexName="instant_search" > <ToggleRefinement attribute="free_shipping" label="Free Shipping" value={true} /> </InstantSearch> );

CSS classes

.ais-ToggleRefinement {}

the root div of the widget

.ais-ToggleRefinement-list {}

the list of toggles

.ais-ToggleRefinement-item {}

the toggle list item

.ais-ToggleRefinement-label {}

the label of each toggle item

.ais-ToggleRefinement-checkbox {}

the checkbox input of each toggle item

.ais-ToggleRefinement-labelText {}

the label text of each toggle item

Translation keys

This widget has no translations.