I need to create a form which resembles union. Basically I want to create a form, part of which depends on one particular field. For each value of that field there are other fields that become needed once their value is set. The number of fields may vary greatly, so the form may become very long for one value and very short for another. I want to fit this into general form structure of sections, groups and fields.

The idea I came up with is to split the form into sections, request switching input in one section and corresponding fields in the next, but the switching section would be too small. Another idea is to put switching field and its fields into group of fields and dynamically change the fields depending on switching field but I don't want jumping content.

What is the best solution in this case, so that user doesn't face with jumping content or too short section?

EDIT: Example of such an input would be a country. Depending on a country user needs to enter different fields to identify his organization.

EDIT 2: By section I mean step.

  • You say "for each value of that field" the form may vary greatly... Do you have some examples of valid input for this particular field? I have an idea in mind, but I'm not sure how to sketch it up for you (or even if I'm on track with what you describe) without some sample inputs. Commented Apr 5, 2018 at 19:33
  • @maxathousand I have updated the question.
    – soslan
    Commented Apr 6, 2018 at 5:12

1 Answer 1


Have you considered starting with a short form that only has the fields you're switching on and clear but marked out spaces for the later fields to load in to?

That should give you the combination of switching later form fields and no content jumping around that you're after. The placeholders in the page should also deal with your concern that just showing the switching field and then loading more fields dynamically makes the form look too short when first loaded.

I would probably go a step further and require the user to press a submit button after they've filled in the switch field. That way, when you load in the new rest-of-form you can freeze the switch field so the user can't easily jump around between variant forms filling in some fields in each and so get you into a situation where you have inconsistent state.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.