DEV Community

Theodorus Clarence
Theodorus Clarence

Posted on • Originally published at theodorusclarence.com

7 Form Components For React Hook Form I Always Use

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

For the demo please visit rhf.clarence.link

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
Enter fullscreen mode Exit fullscreen mode

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

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

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>
    </>
  );
}
Enter fullscreen mode Exit fullscreen mode

Default Form Components

1. Text Input

Normal Text Input, with error validation

TextInput

2. PasswordInput

Password input with peek functionality

PasswordInput

3. TextArea

Normal TextArea Input

TextArea

4. DatePicker

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

DatePicker

5. Select (Native)

Select Input using composition

SelectNative

6. File Upload Dropzone

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

Dropzone

7. Select (react-select)

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

ReactSelect


Originally posted on my personal site, find more blog posts and code snippets library I put up for easy access on my site 🚀

Top comments (1)

Collapse
 
bluebill1049 profile image
Bill

Thanks for sharing! <3