I'm creating a wizard where in one of the steps the user needs to select only one option from a large list with hierarchy.

The list will have about 30 top level categories.

He can select the top level options or the sub level options.

The first idea was to create something like this: A large radio group with hierarchy.


download bmml source – Wireframes created with Balsamiq Mockups

The second option i thought about is with a search box that will do a live search in the options and reduce the list


download bmml source

Would like to hear you approach on this :)

Thank you.

  • How many items in the list? How many categories? I think this will determine the best approach. It seems strange that it is meaningful to select a whole category (Animals) but not multiple items within that category (Wombats and Badgers). – James Fryer Feb 16 '16 at 9:27
  • The list will have about 30 top level categories – dimshik Feb 16 '16 at 9:28

I'm not sure if any non-tech user understands how radio buttons works. Possible problem: The user selects various options and does not notice that the previous choice will be deleted.

An easier and more understandable way to handle it, is to use a dropdown menu with filter. The filter works, like yours. I think in this way it is understandable that the user has only one option.

Example for dropdown field

| improve this answer | |

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.