Skip to main content
The <ToggleRefinement> component displays a checkbox to toggle a boolean facet value.

​
Import

import { ToggleRefinement } from 'react-instantsearch';

​
Props

​
attribute
string
required
The attribute to toggle.
<ToggleRefinement attribute="free_shipping" />
​
label
string
The label to display next to the checkbox. By default, it uses the value name.
<ToggleRefinement attribute="free_shipping" label="Free Shipping" />
​
on
boolean | number | string
The value to filter on when the toggle is checked.
<ToggleRefinement attribute="free_shipping" on={true} />
​
off
boolean | number | string
The value to filter on when the toggle is unchecked.
<ToggleRefinement attribute="in_stock" on={true} off={false} />
​
classNames
object
CSS classes to customize the component styling.

​
Example

import { InstantSearch, ToggleRefinement, Hits } from 'react-instantsearch';
import { liteClient as algoliasearch } from 'algoliasearch/lite';

const searchClient = algoliasearch(
  'YourApplicationID',
  'YourSearchOnlyAPIKey'
);

function App() {
  return (
    <InstantSearch searchClient={searchClient} indexName="products">
      <div className="filters">
        <ToggleRefinement
          attribute="free_shipping"
          label="Free Shipping"
        />
        <ToggleRefinement
          attribute="on_sale"
          label="On Sale"
        />
      </div>
      <Hits />
    </InstantSearch>
  );
}

​
With Custom Values

function App() {
  return (
    <InstantSearch searchClient={searchClient} indexName="products">
      <ToggleRefinement
        attribute="status"
        label="In Stock Only"
        on="available"
        off="all"
      />
      <Hits />
    </InstantSearch>
  );
}

​
Multiple Toggles

function App() {
  return (
    <InstantSearch searchClient={searchClient} indexName="products">
      <div className="filters">
        <h3>Filters</h3>
        <ToggleRefinement
          attribute="free_shipping"
          label="Free Shipping"
        />
        <ToggleRefinement
          attribute="on_sale"
          label="On Sale"
        />
        <ToggleRefinement
          attribute="in_stock"
          label="In Stock"
        />
        <ToggleRefinement
          attribute="eco_friendly"
          label="Eco-Friendly"
        />
      </div>
      <Hits />
    </InstantSearch>
  );
}