I'm not sure on which control to use on this case. Is it confusing to have two different checkbox styles that behave in different ways?

enter image description here

(note: this is just a small part of a whole bunch of filters and more checkboxes that appear on a sidebar of a search results page, I just cropped it here cause it shows the style of the two checkboxes)

For the first set of checkboxes it is clear that checkbox is the right choice as you can choose multiple options and it will only take effect after you update.

However I'm not sure about the second one. It works as a toggle and the changes take effect immediately by reloading the page and changing the search results.

I thought the best way was to change the checkbox style and enclose label + checkbox in a box to look like a button.

But by reading this I've also considered a toggle switch, however I feel it would be more of a mobile choice, and not sure if it works when the page needs to be reloaded for changes to take effect.

  • Why do you require the user to manually "submit" some but not all settings? It's clearest to either have them all submit automatically upon changing, or have them all require manual submission.
    – Mels
    Aug 1, 2013 at 11:45
  • I can understand why. Depending on how quickly the page would update and how distracting it might be, if I want to see Boy Band and Club events, I would not want the page to change until I've made both selections.
    – wootcat
    Aug 1, 2013 at 13:16
  • yeah exactly, the ideal is what Mels said, but the problem is, there is a lot of filters on the sidebar of search results, if I create an 'update all' button at the bottom the user will have to scroll down and can end up not seeing it and I can't have 'update automatically' for things like a date range or as wootcat it can't be annoying when you have a bunch of checkboxes and it refreshes the page everytime you click in one. Aug 1, 2013 at 14:43

1 Answer 1


Your opening question is of the general form "is it confusing to have two different styles of the same control that behave in different ways on the same page?" The general answer to that is yes, visual similarity should be an indication of similar function and vice versa.

Generally, I think checkboxes are best used only where they have no "side effects" on the page, unless it's very clear from the context. You hinted at this yourself when you said why checkboxes are the right choice for the first set. The bottom checkbox presumably changes the top of the form by hiding items that no longer apply so I'd suggest a toggle button or similar.

Since what you're essentially building is a filter for the list, I'd personally do the UI as follows: have a link or button with the text "Show only ..." but no checkbox where it is now and if the user clicks it, change to displaying a line saying something like "Filter by:" above the selection and have an element "tickets available" in that line, with a circled X or similar next to it. My thinking here is that it makes clear to the user that the filter relates to the main list of checkboxes she's seeing and gives affordance how to turn it off again. This pattern also scales nicely to multiple filters.

Perhaps the bigger question though is why the two operate differently at all - an "update" button on a website is ditinctly old-fashioned, it's all about AJAX nowadays (which I presume you already have implemented if the bottom checkbox reloads things automatically). If you make everything work the same there's no reason you shouldn't use boxes for everything.

  • About your third paragraph, I have multiple filters so the 'tickets available' filter will not affect only those checkboxes but any search result. I could in fact make the whole thing update automatically but as I said to Mels, I think it can sometimes but annoying to update each time you click a checkbox.. but anyway about the button itself, you said to go for a toggle, can you tell me which kind? on the link 'reading this' you can see three examples, I can make just the bg color to toggle to indicate selection but I just thought a styled checkbox would make the selection more evident Aug 1, 2013 at 15:14
  • It's a matter of style as much as anything else but I'd use a toggle button. This seems to be the most standard behaviour to me - in thunderbird for example (the example closest to hand I could find) the "quick filter bar" has a sequence of toggle buttons (and the toolbar button to show/hide the filter bar is again a toggle button).
    – user34166
    Aug 2, 2013 at 16:14

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.