Skip to main content
Photo from unsplash: nikola-johnny-mirkovic-wyM1KmMUSbA-unsplash_fzyj2q

7 Form Components For React Hook Form I Always Use

Written on July 12, 2021 by Theodorus Clarence.

Last updated April 02, 2022.

See changes
2 min read
––– views

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.thcl.dev

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 me@theodorusclarence.com

Yup Demo

I also made a validation using Yup, you can access it on https://rhf.thcl.dev/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

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

// 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

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. 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

Tweet this article

Enjoying this post?

Don't miss out 😉. Get an email whenever I post, no spam.

Subscribe Now