An Input with React Hook Form component is a controlled input field that integrates with the React Hook Form library for efficient form handling in React applications. It simplifies the process of managing form state, validation, and submission. By utilizing React Hook Form, this component enables easy tracking of input values, ensures validation rules are applied, and provides streamlined error handling, making it a powerful tool for building robust forms with minimal boilerplate code.

# Demo

# Attributes

Name	Type	Default	Details
className	string	' '	You can customise by passing tailwind classes.
labelClassName	string	' '	You can customise by passing tailwind classes.
inputClassName	string	' '	You can customise by passing tailwind classes.
control	react-hook-form control	' '	React hook form control.
errors	react-hook-form errors	' '	React hook form errors.
rules	react-hook-form rules	' '	React hook form rules.
name	string	form-input	You can pass name to name the changed value.
id	string	input	You can pass id to create unique identifier.
label	string	' '	You can pass label of the input.
placeholder	string	' '	You can pass placeholder of the input.
type	text \| email \| number \| date ..etc	text	You can pass type of the input.
disabled	boolean	false	You can pass disabled to set default checkbox state.

# Usage

import { NButton, NFormInput } from 'nayan';
import { useForm } from 'react-hook-form';

const FormInput = () => {
  const { control, handleSubmit, formState: { errors },} = useForm({
    defaultValues: {
      email: "niranjan.devasani@gmail.com"
    },
  });

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <NFormInput
        control={control}
        errors={errors}
        name="email"
        id="in1"
        type="email"
        label="Email"
        placeholder="Enter email"
        className="mb-3"
      />
      <NButton type="submit">Submit</NButton>
    </form>
  );
};

export default FormInput;