Creating a Responsive Login Form with React

Introduction

In today creating a responsive login form is essential for providing a seamless user experience. With React, developers can create dynamic and interactive forms that adapt to different screen sizes, ensuring accessibility across devices.

Setting Up Your React Project

To begin, set up a new React project using Create React App. This tool provides a comfortable starting point, supporting all necessary packages and configurations. Once your project is ready, install any required libraries such as React Router for navigation and Formik for form handling.

Building the Responsive Login Form

Now, let’s dive into building the login form. Use a combination of controlled components and CSS for styling. In your component, include email and password fields along with a submit button. Use Flexbox or CSS Grid to ensure that the layout remains responsive, adjusting to various screen sizes.

Setting Up Your React Project

To get started, make sure you have a React project set up. You can create a new React application using Create React App by running the following command in your terminal:

npx create-react-app login

Once your project is created, navigate to the project directory:

cd login

Now, you are ready to build your responsive login form.

App.jsx

import React, { useState } from "react";

const App = () => {
  const [formData, setFormData] = useState({
    username: "",
    password: "",
    utype: "",
  });

  const [error, setError] = useState("");

  const handleChange = (e) => {
    const { name, value } = e.target;
    setFormData({ ...formData, [name]: value });
  };

  const login = () => {
    if (!formData.username || !formData.password || !formData.utype) {
      setError("All fields are required!");
      return;
    }
    setError("");
    alert("Login Successful!");
    // Implement login logic here
  };

  const reset = () => {
    setFormData({ username: "", password: "", utype: "" });
    setError("");
  };

  return (
    <div className="container" style={{ display: "flex", justifyContent: "center", alignItems: "center", height: "100vh" }}>
      <div style={{ width: "350px", backgroundColor: "#fff", padding: "20px", borderRadius: "8px", boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)" }}>
        <div style={{ backgroundColor: "#FF9900", padding: "10px", textAlign: "center", borderRadius: "4px 4px 0 0", color: "#fff", fontWeight: "bold" }}>
          Login
        </div>
        <div style={{ marginTop: "10px", color: "red", fontSize: "14px" }}>{error}</div>
        <div style={{ marginTop: "10px" }}>
          <label style={{ display: "block", marginBottom: "5px", fontWeight: "bold" }}>Username</label>
          <input
            type="text"
            className="form-control"
            placeholder="Username"
            name="username"
            value={formData.username}
            onChange={handleChange}
            style={{ width: "100%", padding: "8px", border: "1px solid #ccc", borderRadius: "4px" }}
          />
        </div>
        <div style={{ marginTop: "10px" }}>
          <label style={{ display: "block", marginBottom: "5px", fontWeight: "bold" }}>Password</label>
          <input
            type="password"
            className="form-control"
            placeholder="Password"
            name="password"
            value={formData.password}
            onChange={handleChange}
            style={{ width: "100%", padding: "8px", border: "1px solid #ccc", borderRadius: "4px" }}
          />
        </div>
        <div style={{ marginTop: "10px" }}>
          <label style={{ display: "block", marginBottom: "5px", fontWeight: "bold" }}>User Type</label>
          <select
            className="form-control"
            name="utype"
            value={formData.utype}
            onChange={handleChange}
            style={{ width: "100%", padding: "8px", border: "1px solid #ccc", borderRadius: "4px" }}
          >
            <option value="">Please Select</option>
            <option value="1">Pharmacist</option>
            <option value="2">Doctor</option>
            <option value="3">Receptionist</option>
          </select>
        </div>
        <div style={{ marginTop: "20px", display: "flex", justifyContent: "right" }}>
          <button
            type="button"
            className="btn btn-primary"
            onClick={login}
            style={{ padding: "8px 12px", backgroundColor: "#007bff", color: "#fff", border: "none", borderRadius: "4px", cursor: "pointer" }}
          >
            Sign In
          </button>
          &nbsp;
          <button
            type="button"
            className="btn btn-warning-mt-4"
            onClick={reset}
            style={{ padding: "8px 12px", backgroundColor: "#ffc107", color: "#000", border: "none", borderRadius: "4px", cursor: "pointer" }}
          >
            Reset
          </button>
        </div>
      </div>
    </div>
  );
};

export default App;

Paste the Bootstrap style inside head tag the index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + React</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
  </head>
  <body>
    <div id="root"></div>
    <script type="module" src="/src/main.jsx"></script>
  </body>
</html>