Forms are the bread and butter of user interaction on the web, but getting them right can be tricky. One of the most significant challenges is handling validation (users are unpredictable) and providing clear, actionable error messages. We've all encountered forms that leave us frustrated with cryptic or unhelpful error messages, and we know how that affects user experience.

In this post, we’ll explore how you can use 

 to simplify form validation and deliver a polished, user-friendly experience. We'll build a login form that gracefully handles validation errors and ensures users know exactly what went wrong and how to fix it.

Validation isn't just about ensuring the form works correctly; it's also about guiding users. Poor validation leads to confusion, frustration, and potentially lost customers. Effective validation should:

, creating forms with these principles is simple and intuitive.

Here’s how we can create a login form with shadcn/ui, complete with validation and error handling.

 installed in your project. You can add it by following the instructions on the 

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

export function LoginForm() {
  const [formData, setFormData] = useState({ email: "", password: "" });
  const [errors, setErrors] = useState({ email: "", password: "" });

  const validateForm = () => {
    const newErrors = { email: "", password: "" };
    if (!formData.email) {
      newErrors.email = "Email is required.";
    } else if (!/\S+@\S+\.\S+/.test(formData.email)) {
      newErrors.email = "Please enter a valid email address.";
    }
    if (!formData.password) {
      newErrors.password = "Password is required.";
    } else if (formData.password.length < 6) {
      newErrors.password = "Password must be at least 6 characters.";
    }
    setErrors(newErrors);
    return !newErrors.email && !newErrors.password;
  };

  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>Email</FormLabel>
        <FormControl>
          <input
            type="email"
            placeholder="Enter your email"
            value={formData.email}
            onChange={(e) => setFormData({ ...formData, email: e.target.value })}
            className={`border ${errors.email ? "border-red-500" : "border-gray-300"} rounded-md p-2 w-full`}
          />
        </FormControl>
        {errors.email && <FormMessage className="text-red-500">{errors.email}</FormMessage>}
      </FormField>

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

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

Form validation doesn’t have to be a nightmare. By using 

, you can create polished, user-friendly forms that guide users and minimize frustration. This login form is just the beginning—shadcn/ui provides the building blocks to tackle more complex forms with ease.

Want to dive deeper? Check out our course 

Sleek Next.JS Applications with shadcn/ui

 for a comprehensive guide to building beautiful, responsive, and accessible forms.

<h1 data-node-type="titlePlaceholder" class="titlePlaceholder">Mastering Form Validation with shadcn/ui</h1><h3 class="heading-anchor-text" id="introduction"><span>Introduction</span><a class="d-inline heading-anchor" title="Direct link to heading" href="#introduction">#</a></h3><p>Forms are the bread and butter of user interaction on the web, but getting them right can be tricky. One of the most significant challenges is handling validation (users are unpredictable) and providing clear, actionable error messages. We've all encountered forms that leave us frustrated with cryptic or unhelpful error messages, and we know how that affects user experience.</p><p>In this post, we’ll explore how you can use <strong>shadcn/ui</strong> to simplify form validation and deliver a polished, user-friendly experience. We'll build a login form that gracefully handles validation errors and ensures users know exactly what went wrong and how to fix it.</p><hr><h3 class="heading-anchor-text" id="why-validation-matters"><span>Why Validation Matters</span><a class="d-inline heading-anchor" title="Direct link to heading" href="#why-validation-matters">#</a></h3><p>Validation isn't just about ensuring the form works correctly; it's also about guiding users. Poor validation leads to confusion, frustration, and potentially lost customers. Effective validation should:</p><ul><li><p>Clearly indicate what’s wrong - i.e. don't send generic messages like 'submission failed' or worse, an error message straight from the API.</p></li><li><p>Explain how to fix it - i.e. error messages must be actionable.</p></li><li><p>Prevent further action until errors are resolved.</p></li></ul><p>With <strong>shadcn/ui</strong>, creating forms with these principles is simple and intuitive.</p><hr><h3 class="heading-anchor-text" id="building-the-form"><span>Building the Form</span><a class="d-inline heading-anchor" title="Direct link to heading" href="#building-the-form">#</a></h3><p>Here’s how we can create a login form with shadcn/ui, complete with validation and error handling.</p><h3 class="heading-anchor-text" id="setup"><span>Setup</span><a class="d-inline heading-anchor" title="Direct link to heading" href="#setup">#</a></h3><p>Ensure you have <strong>shadcn/ui</strong> installed in your project. You can add it by following the instructions on the <a href="https://ui.shadcn.dev/" target="_blank" rel="noopener noreferrer nofollow">shadcn/ui documentation</a>.</p><h3 class="heading-anchor-text" id="code-example"><span>Code Example</span><a class="d-inline heading-anchor" title="Direct link to heading" href="#code-example">#</a></h3><div style="
          min-height: 1600px;
          max-width: 100%;
            "><textarea data-iscodemirror="true" class="d-none" data-mode="text/typescript-jsx" data-uniqueid="cm-ubFvj5Nxq3Z-CN9uLAcqU" id="cm-ubFvj5Nxq3Z-CN9uLAcqU">import { Form, FormField, FormControl, FormLabel, FormMessage, Button } from "shadcn/ui";
import { useState } from "react";

export function LoginForm() {
  const [formData, setFormData] = useState({ email: "", password: "" });
  const [errors, setErrors] = useState({ email: "", password: "" });

  const validateForm = () =&gt; {
    const newErrors = { email: "", password: "" };
    if (!formData.email) {
      newErrors.email = "Email is required.";
    } else if (!/\S+@\S+\.\S+/.test(formData.email)) {
      newErrors.email = "Please enter a valid email address.";
    }
    if (!formData.password) {
      newErrors.password = "Password is required.";
    } else if (formData.password.length &lt; 6) {
      newErrors.password = "Password must be at least 6 characters.";
    }
    setErrors(newErrors);
    return !newErrors.email &amp;&amp; !newErrors.password;
  };

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

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

      &lt;FormField&gt;
        &lt;FormLabel&gt;Password&lt;/FormLabel&gt;
        &lt;FormControl&gt;
          &lt;input
            type="password"
            placeholder="Enter your password"
            value={formData.password}
            onChange={(e) =&gt; setFormData({ ...formData, password: e.target.value })}
            className={`border ${errors.password ? "border-red-500" : "border-gray-300"} rounded-md p-2 w-full`}
          /&gt;
        &lt;/FormControl&gt;
        {errors.password &amp;&amp; &lt;FormMessage className="text-red-500"&gt;{errors.password}&lt;/FormMessage&gt;}
      &lt;/FormField&gt;

      &lt;Button type="submit" className="bg-blue-500 text-white rounded-md px-4 py-2"&gt;
        Submit
      &lt;/Button&gt;
    &lt;/Form&gt;
  );
}</textarea></div><hr><h3 class="heading-anchor-text" id="breaking-it-down"><span>Breaking It Down</span><a class="d-inline heading-anchor" title="Direct link to heading" href="#breaking-it-down">#</a></h3><ol><li><p><strong>Form State Management:</strong></p><ul><li><p>We use <code>useState</code> to manage both the form's input values (<code>formData</code>) and the validation errors (<code>errors</code>).</p></li></ul></li><li><p><strong>Validation Logic:</strong></p><ul><li><p>The <code>validateForm</code> function checks the inputs for common issues (empty fields, invalid email format, etc.) and updates the <code>errors</code> state.</p></li></ul></li><li><p><strong>Dynamic Error Messages:</strong></p><ul><li><p>The <code>FormMessage</code> component displays specific error messages for each input field, ensuring users understand what went wrong.</p></li></ul></li><li><p><strong>Styling for Feedback:</strong></p><ul><li><p>The <code>className</code> property dynamically applies a red border to inputs with errors, providing immediate visual feedback.</p></li></ul></li></ol><hr><h3 class="heading-anchor-text" id="enhancing-the-experience"><span>Enhancing the Experience</span><a class="d-inline heading-anchor" title="Direct link to heading" href="#enhancing-the-experience">#</a></h3><ul><li><p><strong>Real-Time Validation:</strong> Add <code>onBlur</code> or <code>onInput</code> handlers to validate fields as the user types.</p></li><li><p><strong>Custom Error Styles:</strong> Use your design system or CSS framework to create a visually appealing and consistent error display.</p></li><li><p><strong>Form Libraries:</strong> Consider integrating with libraries like <code>react-hook-form</code> or <code>Formik</code> for more advanced form handling.</p></li></ul><hr><h3 class="heading-anchor-text" id="conclusion"><span>Conclusion</span><a class="d-inline heading-anchor" title="Direct link to heading" href="#conclusion">#</a></h3><p>Form validation doesn’t have to be a nightmare. By using <strong>shadcn/ui</strong>, you can create polished, user-friendly forms that guide users and minimize frustration. This login form is just the beginning—shadcn/ui provides the building blocks to tackle more complex forms with ease.</p><p>Want to dive deeper? Check out our course <a href="https://www.newline.co/courses/sleek-nextjs-applications-with-shadcn-ui?code=SleekShadcnUI" target="_blank">Sleek Next.JS Applications with shadcn/ui</a> for a comprehensive guide to building beautiful, responsive, and accessible forms.</p><hr><p></p>

Learn

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

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Mastering Form Validation with shadcn/ui

Responses (0)

Masterclasses

Tutorials

Fullstack React with TypeScript