Filtering on a boolean attribute


I’ve currently got an attribute which is a boolean, and I would like to filter so that if a checkbox is ticked, only records with a true value are returned and if it is not ticked, records with false and true are returned.

I tried using the connectToggle connector to do this in a bunch of different ways:

const VirtualToggle = connectToggle(() => { return null; });
<VirtualToggle attributeName="isOngoing" value={true} defaultChecked={this.state.ongoingFilter} />
<VirtualToggle attributeName="isOngoing" value="true" defaultChecked={this.state.ongoingFilter />
<VirtualToggle attributeName="isOngoing" defaultChecked={this.state.ongoingFilter />

I also tried not using defaultChecked and instead set the refinement inside of the toggle, but that also didn’t work (no records are returned when the refinement is turned on). I then tried using a VirtualMenu, but that also did not work.

Could someone please share some insight into how this kind of filter can be created?

Thank you very much.

Hi @bjorn!

Why not using directly the connectToggle connector to build your checkbox? Here’s an example showing how to filter on the attribute “bool” to have only results that are true.


class MyToggle extends React.Component {
  constructor(props) {
    this.handleInputChange = this.handleInputChange.bind(this);

  handleInputChange(event) {

  render() {
    return (
          Is true
            onChange={this.handleInputChange} />

const CustomToggle = connectToggle(MyToggle)


  <CustomToggle attributeName="bool"/>

Will this work for you?

This doesn’t seem to work either.

When I check the checkbox, no records are returned (same as when I was trying to make a VirtualToggle), even though there are plenty of records with a true value. The query parameters sent to Algolia’s API are:
I assumed the isOngoing:undefined part is the reason why no hits are returned, so I added a value="true" prop to CustomToggle, but it still doesn’t work. After adding the value prop, the following request is sent:


If I try to add a facet filter like isOngoing:true on the Algolia dashboard, it also does not give me any results, which seems to correspond with the issues I’m experiencing in my app.

However, if I add a facet filter with just isOngoing, I get the correct results on the dashboard. How can I replicate this kind of facet filter using react-instantsearch?

I tried the code that I gave you earlier with records like below. bool being declared as an attribute for facetting

      bool: true
      name: "record1"
      bool: false
      name: "record2"

Can you use the following jsfiddle to reproduce the issue your are experiencing?


Here’s a JSFiddle connected to our index to reproduce the issue:

As you can see from the results, a lot of records have isOngoing: true, but if you try to toggle on that attribute, no hits are received.

Hi @bjorn,

Your jsfiddle is not working, can you check it?

Also, can you please verify and add if not present, the onGoing attribute under indices>display>facetting>attributes for facetting?

Thanks :slight_smile:


It seems like the attribute was missing from attributes for facetting!
We’re able to filter our results correctly now.

Thank you very much! :slight_smile:

1 Like

That’s great to hear :slight_smile: Happy Coding @bjorn!