Multiple horizontal checkbox (radio button analog)?

Question

I'm trying to build a vertical filter bar (think airbnb or any review site) where user will add multiple filters.

One can select multiple property types e.g.

Although in many cases with lesser amount of filters (e.g. 2-3) it seems excessive to hide it under select.

Is there a pattern for horizontal checkboxes? (it seems there are radio buttons for radio inout but that's only for one choice).

Answer 1

You're right with radio buttons, they are used to only choose 1 of a group of options.

One example I have seen is this, I think its called a Pills filter (don't quote me on that):

You can have a play with it here: https://www.siteinspire.com/

But its a good example how filters can be used horizontally as apposed to using check boxes.

Answer 2

Horizontal checkboxes in my opinion is an anti-pattern for the below reasons

1. They don’t easily translate into a responsive behavior
2. The user has to work harder to navigate/select on larger screen devices such as tablets and desktops

There might be more but these come to mind straight away.

It is always recommended to have a consistent navigation scheme so that the user does not have to guess what changes happened in the navigation. It just adds another friction point for the users. In this case the facetted search should have a consistent behavior no matter how many facet groups have been returned as part of a particular search.

Recommendations Below is what you can do to improve/optimize the facetted search experience for the users.

1. Always have a 2/3 most used facet groups open and the rest hidden under the more filters options. The challenge will be to determine which ones are the most used facet groups and is a good candidate for testing.

2. Another way to do the same thing is to group the top facets from various groups into another group called top filters and have that expanded all the time. We ended up implementing that on our site.

Let me know if you need further details.