Conditional form

Hi,

I have a dropdown. Based on the value selected, I want to display different types of form elements. For instance, if A is selected, display 1 textarea, if B is selected, display 1 dropdown and 1 input.

I sense it could be possible using the hidden property but isn't there any smoother way and even so the question of positioning remains: I would get gaps of space and this obviously doesn't scale.

Am I missing something?

Thanks!

Hey there @Etienne, great question!

You are definitely on the right track with the use of the hidden property. I would recommend having one select component, then have the value of that component controlling two separate forms.

You can align the forms to be on the same spot on your canvas, which will help alleviate blank space concerns. Then, you can set hidden properties so that the forms are never showing at the same time. The hidden properties can look something like select1.value !== "A" and select1.value !== "B"

I've attached a screen recording to show you this recommendation in action:
Screen Recording 2021-11-29 at 4.44.58 PM.mov

2 Likes