7 Form Components For React Hook Form I Always Use
Tags: react, nextjs, beginners, tailwindcss
Published: 2021-07-12 11:36:15

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 Link
![Demo Link](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/aew7a40qrj0ysyks0678.png)
 
For the demo please visit [rhf.clarence.link](https://rhf.clarence.link)

## Yup Demo

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

---

## Setup

### 1. Install these dependencies
```bash
yarn add react-hook-form @tailwindcss/forms react-icons

optional

yarn add react-datepicker react-dropzone react-select
```

### 2. Configure tailwind.config.js to use [@tailwindcss/forms](https://github.com/tailwindlabs/tailwindcss-forms)
```js
// tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@tailwindcss/forms'),
    // ...
  ],
}
```

### 3. Form Structure
This is the default boilerplate, then you can insert the components inside the `form`

```jsx
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>
    </>
  );
}
```

---

## Default Form Components
### 1. [Text Input](https://rhf.clarence.link/inputs#text-input)
Normal Text Input, with error validation

![TextInput](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kdxmfpr423kfz00jiq2g.gif)

### 2. [PasswordInput](https://rhf.clarence.link/inputs#password-input)
Password input with peek functionality

![PasswordInput](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/km75jce8ne1sz7uezw36.gif)

### 3. [TextArea](https://rhf.clarence.link/inputs#text-area)
Normal TextArea Input

![TextArea](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/63rwadnb9yoz96fujbon.gif)
 
### 4. [DatePicker](https://rhf.clarence.link/inputs#date-picker)
Using `react-datepicker` library, provided with useful props like defaultYear, defaultMonth, locale lang

![DatePicker](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qlayfyv6qwpgvky306zj.gif)

### 5. [Select (Native)](https://rhf.clarence.link/inputs#select-native)
Select Input using composition

![SelectNative](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qtar72d0x80jxutro873.gif)

### 6. [File Upload Dropzone](https://rhf.clarence.link/inputs#dropzone-input)
Using `react-dropzone` library, we can specify selected file extension in the props

![Dropzone](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/afxhanaz7tahfdehrglj.gif)

### 7. [Select (react-select)](https://rhf.clarence.link/inputs#select-react)
Using `react-select` library, allowing us to search on the select input

![ReactSelect](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7vye8zx94k1b8zsidxjd.gif)

---

> Originally posted on [my personal site](https://theodorusclarence.com/?ref=devto), find more [blog posts](https://theodorusclarence.com/blog?ref=devto) and [code snippets library](https://theodorusclarence.com/library?ref=devto) I put up for easy access on my site 🚀