How to create form within an app with conditional components?

  • Goal: Within my app's body component, I'd like to have a form where question2 only appears if a specific value is selected from question1 drop-down.

  • Details: I am creating an app where the user inputs various details about their request. I have a drop-down with 'Option1', 'Option2', etc and 'Other' and if the user selects 'Other', I want a Text Input component to appear. I'm open to either using a form component to do this or just directly with independent components but I can't figure out how to do it either way.

I would play around with the Hidden field under Inspector > Appearance. This is usually available for most components, including Text Input.

Screenshot 2024-11-07 at 4.46.49 PM

So here, you can put a condition where if that condition is true, the Text Input component remains hidden. If false, it appears. Something like where if the value in the dropdown is Other it is false (i.e., not hidden), otherwise it will be hidden:

{{ dropdown.value === 'Other' ? false : true }}
1 Like