🙏Form Handling

import { useState } from "react";

// Controlled Form Component 👇
const Form = () => {
  const [username, setUsername] = useState("");

  const handleChange = (evt) => {
    setUsername(evt.target.value);
  };

  const handleSubmit = (evt) => {
    evt.preventDefault();
    alert(`You typed: ${username}`);
    setUsername("");
  };

  return (
    <div>
      <h1>Form Demo</h1>
      <form onSubmit={handleSubmit}>
        <input type="text" value={username} onChange={handleChange} />
        <button>Submit</button>
      </form>
    </div>
  );
};

const App = () => <Form />;

export default App;

Resources Designing Forms🤔

Form - Ant Design

Ant Design Form UI

Form - Semantic UI React

Semantic UI Forms

Get Started

React Hook Form + Validation