Learn | AI Design Workflow

A React component that collects a name, email, and role via a form, then displays a personalized welcome message on submit.

Output File Structure Distraction free code Code What's new and what's happening?

LLM Written

Human Reviewed

File Structure

├── src
`  `├── App.tsx `← we are here`
`  `├── index.css
`  `└── main.tsx

Distraction free code

const [name, setName] = useState('');
const [email, setEmail] = useState('');
const [role, setRole] = useState('Designer');
const [submitted, setSubmitted] = useState(false);

{/*Form with onSubmit*/}
<form onSubmit={(e) => {
  e.preventDefault();
  setSubmitted(true);
}}>
  <input value={name} onChange={(e) => setName(e.target.value)} />
  <input value={email} onChange={(e) => setEmail(e.target.value)} />
  <select value={role} onChange={(e) => setRole(e.target.value)}>
    <option>Designer</option>
    <option>Developer</option>
    <option>PM</option>
  </select>
  <button type='submit'>Sign up</button>
</form>

{/*Welcome message after submit*/}
{submitted && (
  <div>
    <p>Welcome, {name}!</p>
    <p>{email}</p>
    <p>{role}</p>
  </div>
)}

Code

'use client';
import { UserCheck } from 'lucide-react';
import { useState } from 'react';

export default function Home() {
  const [name, setName] = useState('');
  const [email, setEmail] = useState('');
  const [role, setRole] = useState('Designer');
  const [submitted, setSubmitted] = useState(false);

  return (
    <>
      {!submitted ? (
        <form
          onSubmit={(e) => {
            e.preventDefault();
            setSubmitted(true);
          }}
          className='flex flex-col gap-4 p-6'
        >
          <h2 className='text-lg font-semibold text-gray-800'>Create your account</h2>

          <label className='flex flex-col gap-1'>
            <span className='text-sm text-gray-500'>Name</span>
            <input
              type='text'
              placeholder='Alice Smith'
              value={name}
              onChange={(e) => setName(e.target.value)}
              required
              className='border border-gray-200 rounded-md px-3 py-2 text-sm text-gray-700 outline-none focus:border-blue-400'
            />
          </label>

          <label className='flex flex-col gap-1'>
            <span className='text-sm text-gray-500'>Email</span>
            <input
              type='email'
              placeholder='alice@example.com'
              value={email}
              onChange={(e) => setEmail(e.target.value)}
              required
              className='border border-gray-200 rounded-md px-3 py-2 text-sm text-gray-700 outline-none focus:border-blue-400'
            />
          </label>

          <label className='flex flex-col gap-1'>
            <span className='text-sm text-gray-500'>Role</span>
            <select
              value={role}
              onChange={(e) => setRole(e.target.value)}
              className='border border-gray-200 rounded-md px-3 py-2 text-sm text-gray-700 outline-none focus:border-blue-400 bg-white'
            >
              <option value='Designer'>Designer</option>
              <option value='Developer'>Developer</option>
              <option value='PM'>PM</option>
            </select>
          </label>

          <button
            type='submit'
            className='bg-blue-500 text-white text-sm font-medium rounded-md px-4 py-2 mt-2 hover:bg-blue-600'
          >
            Sign up
          </button>
        </form>
      ) : (
        <div className='flex flex-col items-center gap-3 p-6 text-center'>
          <UserCheck size={32} className='text-green-500' />
          <h2 className='text-lg font-semibold text-gray-800'>Welcome, {name}!</h2>
          <p className='text-sm text-gray-500'>We'll send updates to {email}</p>
          <span className='text-xs bg-gray-100 text-gray-600 rounded-full px-3 py-1'>{role}</span>
          <button
            onClick={() => {
              setSubmitted(false);
              setName('');
              setEmail('');
              setRole('Designer');
            }}
            className='text-sm text-blue-500 mt-2 hover:underline'
          >
            Start over
          </button>
        </div>
      )}
    </>
  );
}

What's new and what's happening?

New!

New concepts: the <form> element with onSubmit, e.preventDefault(), the <select> dropdown, the required attribute, conditional rendering to swap between two views, and using state to build a confirmation screen.

Signup form

Output

Create your account

File Structure

Distraction free code

Code

What's new and what's happening?

On this page

Signup form

Output

Create your account

File Structure

Distraction free code

Code

What's new and what's happening?

Your first form — <form> and onSubmitNewA `<form>` groups inputs together and gives you a single `onSubmit` event that fires when the user clicks the submit button or presses Enter.

What is e.preventDefault() and why do we need it?NewBy default, submitting a form causes the browser to reload the entire page. `e.preventDefault()` stops that from happening so React stays in control.

A dropdown with <select> and <option>NewA `<select>` element works just like a text input in React — it's controlled by state and updated via `onChange`. The only difference is that its possible values come from `<option>` elements.

Built-in validation with required and typeNewHTML gives you free validation that works without writing a single line of JavaScript. The `required` attribute prevents empty submissions, and `type='email'` checks the format.

Swapping between two views with conditional renderingNewWe use a boolean `submitted` state to toggle between showing the form and showing the welcome message. This is a common pattern called 'view switching.'

Resetting the form — setting multiple states at onceThe 'Start over' button sets all four state variables back to their initial values in a single click handler.

On this page