I have search box, and I want two options for users to search "NEW" or "USED". They will essentially be checkboxes, but I want to know the best way to make these look nice, like buttons (most likely using JQuery buttonset), and not the radio icons.

So it should look like some sort of switch, that is intuitive to the user that they can select either new or used. Any suggestions or examples on how that could be styled?

Here is the current image enter image description here

  • what if you want to add more options?
    – Awesh
    Commented Sep 5, 2013 at 10:12
  • I won't, something can only be new or used, there is no other alternative.
    – Source
    Commented Sep 5, 2013 at 10:14
  • where do you want to put switch button? you can also use segment control if you are showing this on results page. please add current screen/wireframe.
    – Awesh
    Commented Sep 5, 2013 at 10:16
  • Do they need to search for new AND used? Commented Sep 5, 2013 at 11:31
  • No, it will only be one or the other.
    – Source
    Commented Sep 5, 2013 at 11:54

3 Answers 3


I think the UI component you're looking for is a flipswitch. These have been popularized by the iPhone in a more "on/off" switch kind of style. However, to reduce cognitive load for your users, I'd recommend using a style where you show both the new and used options, as these sample foundation switches depict. You can still use the core elements of the switch skeumorph if you like: a sliding motion, coloring the currently-selected option while leaving the other option blank, and separating the two by a large circle or other UI element.

These would be appropriate if your user has an either/or choice, but you might want to think about letting them choose both, since some users may not have a preference in this regard. In that case, something like grouped buttons might be better.

  • +1 for Grouped buttons options.. grouped button or check boxes would give freedom to select both options.
    – Awesh
    Commented Sep 5, 2013 at 11:33
  • Switches are more for Boolean type options, either on or off, or true or false, this is new or used, so both options must be clearly visible to the user.
    – Source
    Commented Sep 5, 2013 at 11:53

This is a proposal where you display the search box with the two available options beneath it. Usually the default radio button will be on the left.


download bmml source – Wireframes created with Balsamiq Mockups

  • But the drop down menu's are different dependent on which is selected, so this will not work.
    – Source
    Commented Sep 12, 2013 at 2:14
  • @Source what dropdown menu are you referring to?
    – AsafBO
    Commented Sep 12, 2013 at 6:02

Agree with @ninakix. It is important, however, to show both options and to make it clear to users that they can choose only one of them. Attached an example of a possible way to do this.


  • 2
    Which option is selected in this example?
    – Matt Obee
    Commented Nov 6, 2013 at 9:39
  • It's a slight modification of the foundation switches featured on the linked article.
    – EdGG
    Commented Nov 26, 2013 at 2:02

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.