Selecting single element from a long list with hirarchy

Question

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.

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.