Dropdowns or other inputs inside radio button group

Question

I have taken over the development of an application which is basically like a huge questionnaire. Some of the design choices have a led to some invalid HTML, which I am trying to fix up. The major one is where a dropdown is associated with a radio button. This dropdown (select input) has been nested inside the same <label> as the radio input. While trying to fix this, I was wondering if there might be a better way to display this? Here is an example from the current ui:

Choose one of the following options:

• Radio 1 - dropdown with lots of values
• Radio 2
• Radio 3
• Radio 4

Here is an example with a slider:

How long have you had health issues:

• No health issues
• Between 0 & 200 months - Slider input
• Over 200 months
• Unknown
• Not relevant

Radio-1 could have 20 or more values. Only one of the options can be selected, so it is a radio button style question. I can't just put options 2-4 inside the dropdown as they are irrelevant and would get lost in there. They need to be visible to the user as alternative options, rather than alternative choices for Radio-1. Hope this makes sense!

Are there some design patterns or resources you could point me to for these kind of situations?

Any help would be most appreciated!

Answer 1

I would reveal the other form control(s) as the user selects the radio button:

Side note: avoid sliders and select boxes – they’re hard to use.

Answer 2

Sounds like an opportunity for a classic progressive disclosure interaction.

From the outset, imagine your users sees the 4 simple phrases, one for each radio button.

Don't show them a drop-down list yet.

When the user selects the top-most radio button (the one with the many underlying options), only at that point have your interface expose a new, conditional field (the condition being: its radio button is selected).