canonical / canonical/vanilla-framework
Progressive disclosure in radio button forms
- Dominant language
- HTML
- Stars
- 983
- Forks
- 216
- Avg merge
- 3d 13h
- Merged PRs (30d)
- 3
Description
## 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 ](https://design-system.service.gov.uk/components/radios/#:~:text=Conditionally%20revealing%20a%20related%20question) and is [accessible](https://accessibility.blog.gov.uk/2021/09/21/an-update-on-the-accessibility-of-conditionally-revealed-questions/).
## State
Closed state:

Opened state:

Contributor guide
Research direction
No implementation files or tests are named. Start by locating the existing radio-button component and its examples, then compare them with the closed and opened states in the issue. Done means the related question is conditionally revealed for the selected option and the behavior remains accessible.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, html, sass
- Domain
- accessibility, design, frontend
- Issue type
- Feature
- Difficulty
- 3/5
- Estimated time
- 1-2 days
- Activity status
- Quiet
- Clarity
- Mostly clear
- Newbie friendliness
- 52/100