Dynamic Forms Made Easy with shadcn/ui: Managing Dependent Fields

Dynamic forms—forms that adjust based on user input—are a common requirement in modern web applications. Whether you're designing a checkout flow or a survey, dependent fields make forms more relevant and user-friendly.

But they can also be tricky to implement. Managing state changes, conditionally rendering fields, and handling validation for dynamically added inputs often feels cumbersome.

In this post, we’ll explore how to use 

 to create a dynamic form with dependent fields. We’ll build a registration form where users select a role (e.g., Admin or User), and the form dynamically displays additional fields based on the selected role.

Dependent fields introduce a layer of complexity because:

shadcn/ui simplifies these challenges by providing flexible components and seamless integration with React state management.

Ensure you have shadcn/ui installed in your project. Follow the 

Here’s how we can create a registration form with dynamic dependent fields:

import { Form, FormField, FormControl, FormLabel, FormMessage, Button } from "shadcn/ui";
import { useState } from "react";

export function RegistrationForm() {
  const [formData, setFormData] = useState({
    name: "",
    role: "user", // Default role
    adminCode: "",
  });
  const [errors, setErrors] = useState({ name: "", adminCode: "" });

  const validateForm = () => {
    const newErrors = { name: "", adminCode: "" };
    if (!formData.name) {
      newErrors.name = "Name is required.";
    }
    if (formData.role === "admin" && !formData.adminCode) {
      newErrors.adminCode = "Admin code is required.";
    }
    setErrors(newErrors);
    return !newErrors.name && (formData.role !== "admin" || !newErrors.adminCode);
  };

  const handleSubmit = (e: React.FormEvent) => {
    e.preventDefault();
    if (validateForm()) {
      console.log("Form submitted successfully:", formData);
    }
  };

  return (
    <Form onSubmit={handleSubmit} className="space-y-4">
      <FormField>
        <FormLabel>Name</FormLabel>
        <FormControl>
          <input
            type="text"
            placeholder="Enter your name"
            value={formData.name}
            onChange={(e) => setFormData({ ...formData, name: e.target.value })}
            className={`border ${errors.name ? "border-red-500" : "border-gray-300"} rounded-md p-2 w-full`}
          />
        </FormControl>
        {errors.name && <FormMessage className="text-red-500">{errors.name}</FormMessage>}
      </FormField>

      <FormField>
        <FormLabel>Role</FormLabel>
        <FormControl>
          <select
            value={formData.role}
            onChange={(e) => setFormData({ ...formData, role: e.target.value })}
            className="border border-gray-300 rounded-md p-2 w-full"
          >
            <option value="user">User</option>
            <option value="admin">Admin</option>
          </select>
        </FormControl>
      </FormField>

      {formData.role === "admin" && (
        <FormField>
          <FormLabel>Admin Code</FormLabel>
          <FormControl>
            <input
              type="text"
              placeholder="Enter admin code"
              value={formData.adminCode}
              onChange={(e) => setFormData({ ...formData, adminCode: e.target.value })}
              className={`border ${errors.adminCode ? "border-red-500" : "border-gray-300"} rounded-md p-2 w-full`}
            />
          </FormControl>
          {errors.adminCode && <FormMessage className="text-red-500">{errors.adminCode}</FormMessage>}
        </FormField>
      )}

      <Button type="submit" className="bg-blue-500 text-white rounded-md px-4 py-2">
        Submit
      </Button>
    </Form>
  );
}

Building dynamic forms with dependent fields doesn’t have to be complicated. By leveraging 

, you can create forms that are both functional and elegant with minimal effort. This example of a registration form is just the beginning—imagine the possibilities for checkout flows, surveys, or multi-step forms.

Want to master dynamic forms and more? Check out our course 

Sleek Next.JS Applications with shadcn/ui

 for in-depth tutorials and practical exercises.

CONTRIBUTOR

Nick Badot

AUTHOR

Eyal Cohen

Dynamic forms—forms that adjust based on user input—are a common requirement in modern web applications. Whether you're designing a checkout flow or a survey, dependent fields make forms more relevant and user-friendly. But they can also be tricky to implement. Managing state changes, conditionally…

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Free Tools

Dynamic Forms Made Easy with shadcn/ui: Managing Dependent Fields

Responses (0)

Free AI Career Tools

AI Job Listings

ATS Resume Checker

Startup Perks

Masterclasses

Tutorials

Fullstack React with TypeScript