Nested inputs
Show extra fields only when a user’s answer makes them needed.
Published: Last updated:
Overview
Nested inputs are a form pattern used to reveal additional fields based on a user’s response to a parent input. This approach follows the principle of progressive disclosure, showing extra inputs only when they become relevant.
When a user selects or enters a response that requires more detail, the related inputs appear directly beneath the triggering field. For example, selecting “Yes” to a question such as “Do you have another vehicle?” may reveal additional inputs asking for the vehicle’s make, model, and year.
Because nested inputs depend on the parent input, they should always appear immediately after it and remain clearly grouped both visually and semantically. This helps maintain context and ensures users understand why the additional fields have appeared.
Nested inputs help keep forms shorter and easier to scan while still allowing more detailed information to be collected when necessary. To maintain clarity and usability, nesting should generally be limited to one level and avoid long chains of conditional inputs.
When to use
- When additional information is only required based on a user’s answer
- To progressively reveal related fields without overwhelming the user
- When a response naturally leads to a follow-up question or small group of fields
- To keep forms shorter and easier to scan by hiding unnecessary inputs
When not to use
- When the additional information is required regardless of the user’s answer
- When the nested content becomes large or complex
- When multiple levels of conditional inputs would create deep nesting
- When revealing fields would interrupt or confuse the user’s flow