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


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

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 [email protected]

Yup Demo

I also made a validation using Yup, you can access it on along with the source code.


1. Install these dependencies

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

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

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  plugins: [
    // ...

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>

Default Form Components

1. TextInput

Link to demo

Normal Text Input, with error validation


2. PasswordInput

Link to demo

Password input with peek functionality


3. TextArea

Link to demo

Normal TextArea Input


4. DatePicker

Link to demo

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


5. Select (Native)

Link to demo

Select Input using composition


6. File Upload Dropzone

Link to demo

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


7. Select (react-select)

Link to demo

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


Tweet this article

Enjoying this post?

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

Subscribe Now