Relative radio (or tab) group with sub-inputs

Question

I have a radio group and each value has sub-inputs, for example:

User chooses "Cat" and gets cat-related sub-inputs, there can be any number of sub-inputs.

But the issue with this layout is that "Horse" in the closest to sub-inputs, so user might assume that sub-inputs are related to "Horse" and not to "Cat".

So I change classic radio buttons to horizontal bar:

BUT they problem that text in buttons can be quite long, which creates multiline radio-buttons, which look not nice.

Any idea on what type of control to use in this case?

I choose animals as an example, in reality everything is a bit more complicated.

Answer 1

Grey out the sub selection until the primary selection has been chosen.

This is done for choosing towns in a state, etc.

Dunno what this is called. Or if it's "best practise", but it works, and is used everywhere useful. Definitely a known convention.

Answer 2

Why don't you change the layout slightly while keeping the original controls like you proposed. Have a look at the following mockups:

^{download bmml source – Wireframes created with Balsamiq Mockups}

You simply add balloon-like sub-menu next to the selected animal. And this sub-menu is dynamic.

What you can also do is to start with none of the radios selected and sub-menu fully collapsed (hidden).

With this solution you go left-to-right order in filling in the characteristics of your object while each set of characteristic is in the form of the list. This way your main group titles can be lengthy, in fact as long as they leave some space for the sub-menu. Furthermore, multiline radio buttons don't look that bad if you wisely play with the spacing between each button.

Answer 3

You can use the Expose within radio buttons pattern, so the groups are segmented under (and in close proximity to) the selection.

LukeW discusses this pattern in his classic book Web Form Design

Like most things he writes about, he's researched and tested this method:

Because this solution displayed radio buttons and the selection dependent inputs in very close proximity to each other, it also acheived near perfect satisfaction ratings. The "expose within radio buttons" also hid irrelevant form inputs from people until they needed them.

If you use this pattern, it will be clearer to the user that the radio button they select will have its own independent input set.

Here's an example from codepen:

You'll have enough room for long labels and a form group, and the animation that opens the sub inputs tells the user they belong to the choice they just selected.