0

I have a set of data, let's say it is price:

[$0 - $100] [$100 - $200] [$200+]

A user should be able to make a selection, but then should be able to deselect something.

My initial thought is "I should use a checkbox because they can unselect an option." The issue is that, this filtering facet only allows for one selection. So then my thought goes to "I should use radio buttons!" Another problem: this implies that after selection, you are unable to unselect your option.

Adding an option for "none" seems counterintuitive because none for price implies you're making an empty selection which makes no sense.

Question: Is there a UI control that allows for selecting a single option, but also unselect it if not wanting it anymore?

  • What is the default state of the page? Does it start by showing all items and then you can filter? If so you should have an "all" option so users can return to the default, which will be the equivalent of deselecting your option. – DasBeasto Mar 21 '16 at 17:43
  • All seems to be the more appropriate choice on mobile. I have another interaction that's on desktop. – Majo0od Mar 21 '16 at 17:45
3

Radio buttons allow the user to switch after the initial selection, so I interpret your requirements to mean that you need users to be able to completely clear their selection.

Wouldn't a radio button group with an option to clear the selection meet your criteria?

mockup

download bmml source – Wireframes created with Balsamiq Mockups

0

I think a toggle button group is often used to resolve this type of interaction/behaviour.

Basically it combines the behaviour of checkbox in a button group, and using the toggle behaviour to allow selection and deselection as well. I would caution against its use as it seems more intuitive on mobile but less so on desktop.

You can look up various implementations of this design pattern for Android, Apple, Windows, etc. on StackOverflow and other places on the web, but it is reasonably well-known and quite commonly used.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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