Input Hook Form
Displays a form input field or a component that looks like an input field uses react-hook-form.
# 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. |
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;