canonical / canonical/vanilla-framework

Progressive disclosure in radio button forms

Open
#4,893 7 comments 0 reactions 0 assignees View on GitHub
Review: Code needed Triaged: Pragma Triaged: v4 WG: Validated
Dominant language
HTML
Stars
983
Forks
216
Avg merge
3d 13h
Merged PRs (30d)
3

Description

## Visual

![image](https://github.com/canonical/vanilla-framework/assets/68336485/2b029167-7bd2-4805-b373-cf53a922e56e)

## 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:
![image](https://github.com/canonical/vanilla-framework/assets/68336485/f440fbed-f0d4-4307-b40b-76cd5d8b6637)

Opened state:
![image](https://github.com/canonical/vanilla-framework/assets/68336485/cffb5dae-a4cb-4265-a648-2e0770c84ed4)

Contributor guide

Open the contributing 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.