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
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.
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
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.
