What You'll Build

A dynamic survey form that shows different fields based on user selections. You'll create a user registration form that adapts its questions based on the user type selected.

What You'll Learn

How to show/hide fields based on dropdown selections
Progressive disclosure patterns for better UX
Creating dynamic surveys with conditional logic
Using the isVisible property for field visibility

⚡

Interactive Learning

Every code snippet below is fully editable! Feel free to modify the code, experiment with different values, and see your changes reflected instantly in the live preview on the right.

Use the play button to run different snippet, or the refresh button to restore the original example.

Tutorial Steps

Step 1: Starting Point

Let's start with an empty form function. This is where we'll build our dynamic survey form step by step.

Step 2: Basic Fields

First, let's add the basic fields that will control our conditional visibility. We'll create a dropdown for user type and a name field.

💡 Tip:

The dropdown will be our "trigger" field that determines which additional fields to show. Try changing the selection to see how it affects the form!

Step 3: Show/Hide Fields Based on Selections

Now let's add student-specific fields that only appear when "Student" is selected. This demonstrates basic conditional visibility.

💡 Tip:

The isVisible property takes a function that returns true/false. When it returns false, the field is hidden. Try selecting different user types to see the fields appear/disappear!

Step 4: Progressive Disclosure Patterns

Let's add teacher-specific fields with progressive disclosure - showing additional fields only after the user has filled in the initial teacher information.

💡 Tip:

Progressive disclosure shows fields in stages. First, teachers see basic fields (subject, experience). Only after entering a subject do they see additional fields (grade levels, certification). This reduces cognitive load by revealing information progressively!

Step 5: Conditional Subform Visibility

Now let's take conditional visibility to the next level by showing entire subforms based on user type. This creates organized, contextual form sections.

💡 Tip:

Subforms can have their own isVisible property, just like individual fields. When a subform is hidden, all its fields are hidden too. This is perfect for organizing complex forms into logical sections!

Try It Yourself

Challenge 1: Add a field that only shows when "Parent" is selected
Challenge 2: Create a field that shows for both "Student" and "Teacher" but not "Parent"
Challenge 3: Add a conditional field that depends on multiple conditions (e.g., student + specific grade level)

Next Steps

Excellent! You've learned how to create dynamic forms with conditional field visibility. Ready to explore more advanced form patterns?

Continue to Conditional Required Tutorial

Other learning paths:

Learn about conditional validation
Master complex form logic
Create multi-step wizards