Textinput
js
import Textinput from "@/components/Textinput";
const Example = () => {
return (
<div>
<Textinput
label="Project Name*"
name="pn"
type="text"
placeholder="Management dashboard"
/>
</div>
);
};
TIP
You can use html input attribute via props. For example: type="text", name="pn", placeholder="Management dashboard" You can also use label props for label text.
Note
For label and input connection use name props. You can also make input horizontal by using horizontal props.
TIP
Pass error & success props for error message.
js
<Textinput
label="Project Name*"
name="pn"
type="text"
placeholder="Management dashboard "
error="This field is required"
/>
Tip
Validation is included in this component.
Validation Usage
js
import React from "react";
import Textinput from "@/components/ui/Textinput";
import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";
const FormValidationSchema = yup
.object({
password: yup.string().required("Password is Required"),
email: yup.string().email("Invalid email").required("Email is Required"),
})
.required();
const Simple = () => {
const {
register,
formState: { errors },
handleSubmit,
} = useForm({
resolver: yupResolver(FormValidationSchema),
});
const onSubmit = (data) => {
console.log(data);
};
return (
<div>
<form onSubmit={handleSubmit(onSubmit)} className="space-y-4 ">
<Textinput
name="email"
label="email"
type="email"
register={register}
error={errors.email}
/>
<Textinput
name="password"
label="password"
type="password"
register={register}
error={errors.password}
/>
<div className="ltr:text-right rtl:text-left">
<button className="btn btn-dark text-center">Submit</button>
</div>
</form>
</div>
);
};
export default Simple;