Conditional reveal within a radio group

[PoojMenon]

Hi, we have a scenario where we need the user to provide some additional input based on their selection of a radio button. See below screenshots.

• Is this possible to do with the Radio group component ?
• Will this cause issues with accessibility?
• Has a similar pattern been used anywhere else on the console?

[andoyle]

For some added color, context and the input label that I forgot 🙈

We’re following a pattern from this article on handling optional fields - https://adamsilver.io/articles/form-design-handling-optional-fields/#conditional-reveal which uses the Gov.uk guidelines - https://design-system.service.gov.uk/components/radios/#conditionally-revealing-content

The current implementation in Console has a radio button option which is auto selected to “I do not have a business tax id” below company address information. We want to break this out into its own question / page so it’s not missed and gives focus to the user to answer that particular important question.

So far we’ve tested this with two users and the clear question per page has worked well. Two more usability sessions lined up later this evening so hopefully we’ll have more information then.

Prototype here: https://srdgy.csb.app/tax User must select Yes/No before continuing (not built into prototype), if they select Yes but don't enter a tax id into the input field, we show inline validation message after they select "Continue".

[SiTaggart]

From a component usage and design accessibility point of view, I don't see any problems with the prototype @andoyle is showcasing here at all. (there's a couple of duplicate ids in the code implementation, but that's not the scope here).

Especially welcome the additional labels on the disclosed input for Tax number. Really nice and clear.

Its a pretty common pattern on the internet too. Seems great!

[andoyle]

Thanks Simon -- that's what we thought but heard there might be an issue during a crit pod.