7 Form Components For React Hook Form I Always Use

Written on July 12, 2021 by

photo of me

Theodorus Clarence.

––– views • 2 min read

Introduction

Building forms with validation is tedious and repetitive. So my friend and I created a library of form input components so we can just copy the code in every code base, styled minimally with all error validation message using Tailwind CSS and react-icons.


Demo Screenshot

For the demo please visit rhf.clarence.link

I'm open for all suggestions and contributions to improve 🚀. Open a PR on the repository (available on the demo website) or email me at theodorusclarence@gmail.com

Yup Demo

I also made a validation using Yup, you can access it on https://rhf.clarence.link/yup along with the source code.


Setup

1. Install these dependencies

yarn add react-hook-form @tailwindcss/forms react-icons
optional
yarn add react-datepicker react-dropzone react-select
bash

2. Configure tailwind.config.js to use @tailwindcss/forms

// tailwind.config.js
module.exports = {
theme: {
// ...
},
plugins: [
require('@tailwindcss/forms'),
// ...
],
};
js

3. Form Structure

This is the default boilerplate, then you can insert the components inside the form

import { FormProvider, useForm } from 'react-hook-form';
export default function Page() {
const methods = useForm();
const { handleSubmit } = methods;
return (
<>
<FormProvider {...methods}>
<form onSubmit={handleSubmit(onSubmit)}>Inputs Here</form>
</FormProvider>
</>
);
}
jsx

Default Form Components

1. TextInput

Link to demo

Normal Text Input, with error validation

TextInput

2. PasswordInput

Link to demo

Password input with peek functionality

PasswordInput

3. TextArea

Link to demo

Normal TextArea Input

TextArea

4. DatePicker

Link to demo

Using react-datepicker library, provided with useful props like defaultYear, defaultMonth, locale lang

DatePicker

5. Select (Native)

Link to demo

Select Input using composition

SelectNative

6. File Upload Dropzone

Link to demo

Using react-dropzone library, we can specify selected file extension in the props

Dropzone

7. Select (react-select)

Link to demo

Using react-select library, allowing us to search on the select input

ReactSelect

Enjoying my post? Kindly subscribe to my newsletter if you want an update everytime I post.