@marlon-chaviano/field-kit
Version:
A collection of reusable and accessible form components built with React, TailwindCSS, and fully integrated with React Hook Form...
14 lines (13 loc) • 899 B
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useFormContext } from "react-hook-form";
import { Label } from "./ui/label";
import { Textarea } from "./ui/textarea";
import { cn } from "../lib/utils";
function TextAreaField({ name, label, rules, className, errorClassName, ...props }) {
const { register, formState: { errors }, } = useFormContext();
const error = errors[name];
return (_jsxs("div", { className: "grid w-full gap-3", children: [label && (_jsxs(Label, { className: "mb-2 font-medium text-gray-600", htmlFor: name, children: [label, rules?.required && _jsx("span", { className: "text-red-600", children: "*" })] })), _jsx(Textarea, { id: name, ...props, "aria-invalid": !!error, className: cn("border", className, {
"border-red-500": error,
}), ...register(name, rules) })] }));
}
export default TextAreaField;