toggleRefinement

Lets users toggle a specific filter.

Signature

toggleRefinement({
  container: string | HTMLElement,
  attribute: string,
  // Optional parameters
  on?: boolean | number | string,
  off?: boolean | number | string,
  templates?: object,
  cssClasses?: object,
});

Import

Package manager

import { toggleRefinement } from "instantsearch.js/es/widgets";

const { toggleRefinement } = instantsearch.widgets;
// or directly use instantsearch.widgets.toggleRefinement()

See this widget in action

Preview this widget and its behavior.

About this widget

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

Requirements

Ensure that the attribute provided is already declared as an attribute for faceting.

Examples

JavaScript

toggleRefinement({
  container: "#toggle-refinement",
  attribute: "free_shipping",
  templates: {
    labelText({ count }, { html }) {
      return html`Free shipping (${count.toLocaleString()})`;
    },
  },
});

Options

container · string | HTMLElement · required

The CSS Selector or HTMLElement to insert the widget into.

string

toggleRefinement({
  // ...
  container: "#toggle-refinement",
});

toggleRefinement({
  // ...
  container: document.querySelector("#toggle-refinement"),
});

attribute · string · required

The name of the attribute on which apply the refinement.

To avoid unexpected behavior, you can’t use the same attribute prop in a different type of widget.

JavaScript

toggleRefinement({
  // ...
  attribute: "free_shipping",
});

on · boolean | number | string · default: true

The value of the refinement to apply on the attribute when checked.

boolean

toggleRefinement({
  // ...
  on: false,
});

toggleRefinement({
  // ...
  on: 10,
});

toggleRefinement({
  // ...
  on: "apple",
});

off · boolean | number | string

The value of the refinement to apply on the attribute when unchecked.

boolean

toggleRefinement({
  // ...
  off: false,
});

toggleRefinement({
  // ...
  off: 10,
});

toggleRefinement({
  // ...
  off: "apple",
});

templates · object

The templates to use for the widget.

JavaScript

toggleRefinement({
  // ...
  templates: {
    // ...
  },
});

cssClasses · object · default: "{}"

The CSS classes you can override:

• root. The root element of the widget.
• label. The label of the toggle.
• checkbox. The checkbox element of the toggle.
• labelText. The label text of the toggle.

JavaScript

toggleRefinement({
  // ...
  cssClasses: {
    root: "MyCustomToggleRefinement",
    label: [
      "MyCustomToggleRefinementLabel",
      "MyCustomToggleRefinementLabel--subclass",
    ],
  },
});

Templates

You can customize parts of a widget’s UI using the Templates API.

Each template includes an html function, which you can use as a tagged template. This function safely renders templates as HTML strings and works directly in the browser—no build step required. For details, see Templating your UI.

The html function is available in InstantSearch.js version 4.46.0 or later.

labelText · string | function

The template to use to customize the label. It exposes:

• isRefined: boolean. Indicates whether the checkbox is checked.
• count: number. Shows the number of results after the refinement was applied.
• onFacetValue: object. Describes the value for the attribute. It contains count (useful to get the raw value of the count).
• offFacetValue: object. Describes the value for the attribute. It contains count (useful to get the raw value of the count).

function

toggleRefinement({
  // ...
  templates: {
    labelText({ count }, { html }) {
      return html`<span>Free shipping (${count.toLocaleString()})</span>`;
    },
  },
});

// String-based templates are deprecated, use functions instead.
toggleRefinement({
  // ...
  templates: {
    labelText: "Free shipping ({{ count }})",
  },
});

HTML output

HTML

<div class="ais-ToggleRefinement">
  <label class="ais-ToggleRefinement-label">
    <input class="ais-ToggleRefinement-checkbox" type="checkbox" />
    <span class="ais-ToggleRefinement-labelText">Free Shipping</span>
    <span class="ais-ToggleRefinement-count">18,013</span>
  </label>
</div>

Customize the UI with connectToggleRefinement

If you want to create your own UI of the toggleRefinement widget, you can use connectors.

To use connectToggleRefinement, you can import it with the declaration relevant to how you installed InstantSearch.js.

Package manager

import { connectToggleRefinement } from "instantsearch.js/es/connectors";

const { connectToggleRefinement } = instantsearch.connectors;
// or directly use instantsearch.connectors.connectToggleRefinement()

Then it’s a 3-step process:

JavaScript

// 1. Create a render function
const renderToggleRefinement = (renderOptions, isFirstRender) => {
  // Rendering logic
};

// 2. Create the custom widget
const customToggleRefinement = connectToggleRefinement(renderToggleRefinement);

// 3. Instantiate
search.addWidgets([
  customToggleRefinement({
    // instance params
  }),
]);

Create a render function

This rendering function is called before the first search (init lifecycle step) and each time results come back from Algolia (render lifecycle step).

JavaScript

const renderToggleRefinement = (renderOptions, isFirstRender) => {
  const { value, canRefine, refine, sendEvent, createURL, widgetParams } =
    renderOptions;

  if (isFirstRender) {
    // Do some initial rendering and bind events
  }

  // Render the widget
};

Rendering options

value · object

The current refinement, with:

• isRefined: boolean. Indicates whether the checkbox is checked.
• count: number. Shows the number of results after the refinement was applied.
• onFacetValue: object. Describes the value for the attribute. It contains count (useful to get the raw value of the count).
• offFacetValue: object. Describes the value for the attribute. It contains count (useful to get the raw value of the count).

JavaScript

const renderToggleRefinement = (renderOptions, isFirstRender) => {
  const { value } = renderOptions;

  document.querySelector("#toggle-refinement").innerHTML = `
    <label>
      <input type="checkbox" ${value.isRefined ? "checked" : ""} />
      Free shipping (${value.count})
    </label>
  `;
};

canRefine · boolean · required

Indicates if search state can be refined.

JavaScript

const { canRefine } = renderOptions;

if (!canRefine) {
  document.querySelector("#toggle-refinement").innerHTML = "";
  return;
}

refine · function

Updates to the next state by applying the toggle refinement.

JavaScript

const renderToggleRefinement = (renderOptions, isFirstRender) => {
  const { value, refine } = renderOptions;
  const container = document.querySelector("#toggle-refinement");

  if (isFirstRender) {
    const label = document.createElement("label");
    const input = document.createElement("input");
    input.type = "checkbox";

    input.addEventListener("change", (event) => {
      refine({ isRefined: !event.target.checked });
    });

    label.appendChild(input);
    label.appendChild(document.createTextNode("Free shipping"));
    container.appendChild(label);
  }

  container.querySelector("input").checked = value.isRefined;
};

sendEvent · (eventType, facetValue) => void

The function to send click events. The click event is automatically sent when refine is called. To learn more, see the insights middleware.

• eventType: 'click'
• facetValue: string

JavaScript

// For example,
sendEvent("click", true);

/*
  A payload like the following will be sent to the `insights` middleware.
  {
    eventType: 'click',
    insightsMethod: 'clickedFilters',
    payload: {
      eventName: 'Filter Applied',
      filters: ['isShippingFree:true'],
      index: '',
    },
    widgetType: 'ais.toggleRefinement',
  }
*/

createURL · function

Generates a URL for the next state.

JavaScript

const renderToggleRefinement = (renderOptions, isFirstRender) => {
  const { createURL } = renderOptions;

  document.querySelector("#toggle-refinement").innerHTML = `
    <a href="${createURL()}">Link to the next state</a>
  `;
};

widgetParams · object

All original widget options forwarded to the render function.

JavaScript

const renderToggleRefinement = (renderOptions, isFirstRender) => {
  const { widgetParams } = renderOptions;

  widgetParams.container.innerHTML = "...";
};

// ...

search.addWidgets([
  customToggleRefinement({
    container: document.querySelector("#toggle-refinement"),
  }),
]);

Create and instantiate the custom widget

First, create your custom widgets using a rendering function. Then, instantiate them with parameters.

There are two kinds of parameters you can pass:

• Instance parameters. Predefined options that configure Algolia’s behavior.
• Custom parameters. Parameters you define to make the widget reusable and adaptable.

Inside the renderFunction, both instance and custom parameters are accessible through connector.widgetParams.

TSX

const customToggleRefinement = connectToggleRefinement(renderToggleRefinement);

search.addWidgets([
  customToggleRefinement({
    attribute: string,
    // Optional parameters
    on: boolean | number | string,
    off: boolean | number | string,
  }),
]);

Instance options

attribute · string · required

The name of the attribute on which to apply the refinement.

To avoid unexpected behavior, you can’t use the same attribute prop in a different type of widget.

JavaScript

customToggleRefinement({
  attribute: "free_shipping",
});

on · boolean | number | string · default: true

The value of the refinement to apply on the attribute when checked.

boolean

customToggleRefinement({
  // ...
  on: false,
});

customToggleRefinement({
  // ...
  on: 10,
});

customToggleRefinement({
  // ...
  on: "apple",
});

off · boolean | number | string

The value of the refinement to apply on the attribute when unchecked.

boolean

customToggleRefinement({
  // ...
  off: false,
});

customToggleRefinement({
  // ...
  off: 10,
});

customToggleRefinement({
  // ...
  off: "apple",
});

Full example

HTML

<div id="toggle-refinement"></div>

// Create the render function
const renderToggleRefinement = (renderOptions, isFirstRender) => {
  const { value, refine, widgetParams } = renderOptions;

  if (isFirstRender) {
    const label = document.createElement("label");
    const input = document.createElement("input");
    input.type = "checkbox";

    const span = document.createElement("span");

    input.addEventListener("change", (event) => {
      refine({ isRefined: !event.target.checked });
    });

    label.appendChild(input);
    label.appendChild(document.createTextNode("Free shipping"));
    label.appendChild(span);

    widgetParams.container.appendChild(label);
  }

  widgetParams.container.querySelector("input").checked = value.isRefined;
  widgetParams.container.querySelector("span").innerHTML =
    value.count !== null ? ` (${value.count})` : "";
};

// Create the custom widget
const customToggleRefinement = connectToggleRefinement(renderToggleRefinement);

// Instantiate the custom widget
search.addWidgets([
  customToggleRefinement({
    container: document.querySelector("#toggle-refinement"),
    attribute: "free_shipping",
  }),
]);