React Form with Tailwind CSS and useForm

Last update: 2023-02-10

Type

Quick Win

Membership

🆓

Tech

React

Tailwind

Building a form in React using the Tailwind CSS framework and the ”useForm” hook is a quick and easy way to get up and running with a functional form.

Let’s go through building a simple form with inputs for name and email, and a submit button.

Get started by installting Tailwind in your React project and then adding the useForm hook:

Command

npm install react-hook-form

The register function from the useForm hook is used to register an input field and its associated validation rules.

The register function takes an object as an argument, where you can specify the validation rules for the input field.

Here’s an example of how to use the register function:

import React from 'react';
import { useForm } from 'react-hook-form';

const App = () => {
	const { register, handleSubmit, errors } = useForm();

	const onSubmit = (data) => {
		console.log(data);
	};

	return (
		<form onSubmit={handleSubmit(onSubmit)}>
			<div className="mb-4">
				<label className="block text-gray-700 font-medium mb-2" htmlFor="name">
					Name
				</label>
				<input
					className="appearance-none border border-gray-400 rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:border-indigo-500"
					id="name"
					type="text"
					name="name"
					placeholder="John Doe"
					ref={register({ required: true })}
				/>
				{errors.name && <p className="text-red-500 text-xs italic">Name is required</p>}
			</div>
			<div className="mb-4">
				<label className="block text-gray-700 font-medium mb-2" htmlFor="email">
					Email
				</label>
				<input
					className="appearance-none border border-gray-400 rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:border-indigo-500"
					id="email"
					type="email"
					name="email"
					placeholder="johndoe@example.com"
					ref={register({ required: true })}
				/>
				{errors.email && <p className="text-red-500 text-xs italic">Email is required</p>}
			</div>
			<button
				className="bg-indigo-500 hover:bg-indigo-700 text-white font-medium py-2 px-4 rounded focus:outline-none focus:shadow-outline"
				type="submit"
			>
				Submit
			</button>
		</form>
	);
};

export default App;

In the example above, the register function is used to register the name and email input fields.

The required validation rule is set for both fields, which means that the fields are required to be filled in order for the form to be submitted.

To validate inputs, you can specify validation rules when you register the input field using the register function.

In the example above, we set the required validation rule for both the name and email fields.

There are other validation rules available as well, such as minLength, maxLength, pattern, validate, etc.

You can find a full list of validation rules in the react-hook-form documentation.

Here’s an example of how to use the minLength and pattern validation rules:

<input
	className="appearance-none border border-gray-400 rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:border-indigo-500"
	id="password"
	type="password"
	name="password"
	ref={register({
		required: true,
		minLength: 8,
		pattern: /^(?=.*[a-z])(?=.*[A-Z])(?=.*d)(?=.*[@$!%*?&])[A-Za-zd@$!%*?&]{8,}$/
	})}
/>;
{
	errors.password && (
		<p className="text-red-500 text-xs italic">
			Password must be at least 8 characters long and must contain at least one uppercase letter,
			one lowercase letter, one number, and one special character
		</p>
	);
}

In this example, the password field is required and must be at least 8 characters long.

It must also contain at least one uppercase letter, one lowercase letter, one number, and one special character. If the validation fails, the error message will be displayed.

Simon Grimm