Conditional reveal fields

Problem Context

• A radio, checkbox, or select answer determines whether one short follow-up field or piece of supporting information is relevant.
• The revealed content belongs to the same question or answer choice rather than a separate task, page, or section.
• The product can remove hidden values from validation and submission when the trigger is no longer selected.
• The implementation can be tested with keyboard and assistive technology so newly revealed fields are discoverable.

Selection Rules

• Choose conditional reveal fields when one option needs a short, directly related follow-up field in the same local context.
• Use dependent fields instead when the later field remains part of the form and its option set or validity changes based on a controlling value.
• Use a plain radio group or checkbox group when no answer needs a follow-up field.
• Use single-question page or multi-step form when the follow-up has multiple questions, branching, submit behavior, or enough reading burden to need its own page.
• Use details or progressive disclosure for optional explanation text that is not part of the answer data.
• Place revealed content immediately after the triggering input, not at the bottom of the form or in a disconnected panel.
• Require revealed fields only while their trigger is selected.
• Clear or omit hidden field values when the trigger becomes unselected, unless the user is explicitly returning to the same selected option and draft restoration is intended.
• Show validation errors on the revealed field and preserve the selected trigger so users can see and fix the missing follow-up.
• Avoid nested reveals unless the branch remains short and easy to understand; otherwise split the flow.

Required States

• Initial state with trigger options visible and no conditional field shown.
• Trigger selected state with the related follow-up field revealed directly under the trigger.
• Revealed field completed state with value included in submission.
• Trigger changed or deselected state where the revealed field hides and its value is cleared or excluded.
• Revealed field required error state while the trigger remains selected.
• Hidden field not required state after the trigger is cleared.
• Multiple checkbox reveal state where more than one selected option can own its own follow-up field.
• Assistive notification or descriptive state that makes the newly revealed field discoverable.
• Error summary state linking to the revealed field when submission fails.
• Oversized branch state where the UI points users to a separate page or flow instead of revealing too much content.

Interaction Contract

• Selecting the trigger shows the related field immediately under that trigger.
• Deselecting the trigger hides the related field and removes or marks its value out of scope.
• The revealed field does not steal focus unless the product deliberately moves focus for a validated error or guided step.
• Validation checks revealed required fields only while their trigger is selected.
• Errors on a revealed field identify the revealed field and keep the trigger visible.
• Keyboard users can tab from the trigger into the revealed field in logical order.
• Submission payload excludes hidden stale values unless the user reselects the trigger and intentionally keeps the draft.

Implementation Checklist

• Map each trigger option to exactly which field or short content block it reveals.
• Keep revealed content adjacent to the triggering input in DOM and visual order.
• Use stable IDs and descriptions so the trigger and revealed field relationship can be understood by assistive technology.
• Clear, exclude, or explicitly mark hidden values as inactive when their trigger is deselected.
• Apply required validation conditionally based on the trigger state.
• Ensure error summary links target the revealed field and that the trigger remains selected when errors are shown.
• Test with keyboard, screen reader, browser Back, form reload, saved draft, error summary, mobile layout, multiple selected checkboxes, and deselection.
• Escalate to a separate page, wizard, or multi-step flow when the revealed branch contains several questions or a separate submit action.

Common Generated-UI Mistakes

• Hiding a required field and still validating it after its trigger is unselected.
• Submitting hidden stale values because the field was visually hidden but still active in the model.
• Revealing a complete form or separate task under a single option.
• Placing the revealed field far away from the answer that triggered it.
• Using conditional reveal to hide independent choices users should compare.
• Nesting several levels of reveals until users cannot tell what is required.
• Relying only on visual appearance so assistive technology users miss the newly revealed question.

Critique Questions

• Is the revealed field directly related to the selected answer?
• What happens to the revealed value when the trigger is unselected?
• Is the field required only while visible and relevant?
• Can keyboard and screen reader users discover the newly revealed field?
• Would this branch be clearer as its own question page or step?
• Does the error summary link to the revealed field while keeping the trigger selected?