Add new input based on previous form input value

Question

I have a form inside a dialog that I'm developing, and essentially if the user opts to create new, they should be presented with another select input that allows them to select options, and no input if choosing existing.

Showing and hiding an input based on the previous inputs value feels confusing to me and isn't super clean as the height of the dialog will be jumping around or have lots of white space if fixed.

Are there other ways to do this?

Things I've considered:

• Disabling the options input if choosing existing, and keeping it visible at all times
• Putting a button in place of the options input, and disabling that when choosing existing, and when clicked puts an input in its place.
• Having some kind of switch to toggle visibility of input

Answer 1

Draw out all the paths for your form. Where there are splits in the path, consider giving the user a stepped approach, like a wizard.

For your particular example, you can ask the question that would ask them to create new or existing and depending on that sends them down the different paths.

A good resource to read: https://www.gov.uk/service-manual/design/form-structure