Input Hook Form

Displays a form input field or a component that looks like an input field uses react-hook-form.
# Demo
# Attributes
NameTypeDefaultDetails
classNamestring' 'You can customise by passing tailwind classes.
labelClassNamestring' 'You can customise by passing tailwind classes.
inputClassNamestring' 'You can customise by passing tailwind classes.
controlreact-hook-form control' 'React hook form control.
errorsreact-hook-form errors' 'React hook form errors.
rulesreact-hook-form rules' 'React hook form rules.
namestringform-inputYou can pass name to name the changed value.
idstringinputYou can pass id to create unique identifier.
labelstring' 'You can pass label of the input.
placeholderstring' 'You can pass placeholder of the input.
typetext | email | number | date ..etctextYou can pass type of the input.
disabledbooleanfalseYou can pass disabled to set default checkbox state.
Note: Along with these params you can also pass all default input params.
# 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;