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). Feb 16, 2016 at 9:27
  • The list will have about 30 top level categories
    – dimshik
    Feb 16, 2016 at 9:28

1 Answer 1


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


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.