enter image description here

In this design, a user can have the following views:

  • One child from parent 1 and no child from parent 2
  • No child from parent 1 and one child from parent 2
  • One child from parent 1 and one child from parent 2
  • No child from parent 1 and no child from parent 2

I believe being only to view at most one child from either tables calls for radio buttons, but since "turning off" radio buttons is not possible, what's the best way to allow the user to hide the child from either/both categories? My best idea was to include a "hide all" radio button on top of each table.

Any ideas? Or is this the right approach?

Note: The add, edit, and delete buttons are on the top left of each table because, in the rest of the app, that's where the buttons are.


Why not just use a dropdown with three values

  1. None (or select) which is the default value
  2. Child 1
  3. Child 2

The dropdown gives an affordance that only one value can be selected and would not cause confusion. Right now your radio buttons dont look like a radio group and users might get confused about why they cant select both options.


I can't comment yet, so I have to make this an answer. I am confused with the use of the radio buttons - but mostly because I can't see the context in which this screen in used. Can you explain what this screen does or wants to achieve - something along those lines.

  • Each parent are categories (for example: food groups). Each child is an image, but only one child's image can be shown at a time from each parent. If parent one is "Wheat", and parent two is "Fruit", then only one child of wheat and one child of fruit can be shown at any given time. – Vinson Feb 12 '14 at 17:34
  • The a dropdown as proposed by others is best – Jennift Feb 13 '14 at 6:46

Are you displaying more information on selection of one of the choices? If so, a dropdown with a preview would be the best solution:

drop down with preview

Otherwise, a drop-down menu with choices would be the best:

drop down

Maybe provide a bit more context?


"Hiding" the child may not be the best solution, as it may not be apparent to the user that the act of hiding is setting that option to "no child". They may interpret it as just hiding the option from view.

Best option would be to include a third child option, which would be to set the option to "none".


If you want to display all options to the user and not hide them in a drop-down, consider this:

Radio buttons

You're then displaying the option to "hide" in a place closer to the other options, making the ability to "hide" more obvious that in the wireframe posed with your question. You'd also be using the radio button design pattern as it's intended to be used - i.e. user can select one and only one option. Having it as the top option also ensures it's always in a consistent place for the user.

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.