Progressive disclosure in radio button forms

[dgtlntv]

Visual

Context

You can ask the user a related question when they select a particular radio option, so they only see the question when it’s relevant to them.

This might make two related questions easier to answer by grouping them on the same page. For example, you could reveal a phone number input when the user selects the ‘Contact me by phone’ option.

This pattern is used in other design systems like gov.uk's and is accessible.

State

Closed state:

Opened state:

[dgtlntv]

An example implementation can be found as a PR in the maas-react-components library.

[danielmutis]

Validated in the working group meeting. @bartaz To look at the implementation of it.

[bartaz]

@dgtlntv Are we limiting this to only radio/checkbox inputs? Can other input types be nested, like text inputs?

Any rules on how many nested elements can be there?

[dgtlntv]

For the parent element, I would say yes, only radios and check boxes. As for the nested elements, I think other input types should be allowed. A rule about how many elements can be nested is a bit context and input type dependent in my opinion. There should be no more than one additional question asked and in the best case it means no more than one additional input. This is also the recommendation of the designers at gov.uk. In my example above, to answer the one extra question I needed two radio buttons, which I think is still fine. I'm not sure if there is a general rule that can be reflected in the code, but I could write a few sentences of UX documentation about it.

[syncronize-issues-to-jira[bot]]

Thank you for reporting us your feedback!

The internal ticket has been created: https://warthogs.atlassian.net/browse/WD-15243.

This message was autogenerated

[bartaz]

Triage: high effort, high impact. To be implemented in new architecture.