Revealing choice components
Use a revealing choice component when one answer needs an immediate, closely related follow-up on the same page. The extra component stays hidden until the person selects the option that makes it relevant.
This pattern prevents people from seeing questions that do not apply to them, while keeping a simple decision and its follow-up together.
Use the pattern for small, direct follow-ups
A revealing choice is best where the follow-up is a natural consequence of one option.
flowchart TD
A[How would you like to be contacted?] --> B{Choose an option}
B -- Email --> C[Show email address]
B -- Telephone --> D[Show telephone number]
B -- Post --> E[No additional question]Good uses include:
- selecting Other and describing the alternative;
- choosing a contact method and providing the corresponding detail;
- selecting Yes and answering one short follow-up; or
- choosing an option that needs a reference number or brief explanation.
Use a separate page with a flow condition when the follow-up is substantial, has several questions, or changes the next step in the journey. Keeping a long section hidden beneath a choice makes the page hard to scan and test.
Configure it in the Builder
- Add a revealing choice component to the page.
- Write the main question and add the selection items.
- For each relevant selection item, attach the component or components that it should reveal.
- Configure the revealed component’s label, hint and validation as normal.
- Check the page in User view, selecting every option in turn.
The reveal relationship belongs to the selection item. Do not try to recreate a straightforward same-page reveal by adding a separate component-visibility rule to the follow-up component. The reveal pattern is clearer and more reliable for this purpose.
Write the question and follow-up together
The main choice must prepare the person for the extra question. The revealed question should make sense immediately after the selected option.
| Main choice | Revealed follow-up |
|---|---|
Do you have another preferred contact method? → Yes |
Tell us how you would prefer us to contact you |
Which document will you provide? → Other |
Describe the document you will provide |
Would you like updates by text message? → Yes |
Enter a mobile telephone number |
Use hint text to explain why the follow-up is needed or what format is expected. Do not repeat the whole main question in the revealed label.
Validation rules must reflect what is visible
Make a revealed component required only when it is relevant to the selected option. Test a person selecting the option, entering an invalid value, changing to a different option, and returning to the page.
When the controlling answer changes, check what happens to any answer already entered in the follow-up. Do not allow an irrelevant value to be accidentally used by a later action, condition or template. If the value needs to be cleared, design the reset behaviour and the downstream logic together.
Important: A component hidden by a reveal is not an answer to the main question. Ensure the main choice itself remains required when the person must make a selection.
Use choices and reveals accessibly
- Keep choice labels short and mutually understandable.
- Place revealed content directly after its controlling choice.
- Do not hide essential instructions inside a revealed section.
- Do not rely on colour, position or animation to indicate that new content has appeared.
- Test keyboard selection and changing between options, not just a single mouse selection.
If several options each reveal substantial content, reconsider the page structure. A sequence of focused pages is often easier for people using a keyboard, screen reader or small display.
Pre-selected choices and dynamic items
You can pre-select a choice from earlier data, but the resulting reveal should still be clear to a person arriving on the page. Do not pre-select an option that looks like a confirmed decision unless they can see and amend it.
For dynamic choice items, only attach reveal behaviour where the item identities are stable. If the source list can change, test existing drafts and saved selections as well as a new journey.
Test checklist
- Each option shows the correct follow-up components.
- Options without a follow-up leave no unexplained blank space.
- Each revealed component is required only when relevant.
- Changing the main choice does not leave an invalid or misleading dependent value.
- The page works with keyboard navigation and a small display.
- The review page and downstream actions use only information that is still relevant.
- A resumed draft displays the correct option and revealed content.