@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) • 959 B
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useFormContext } from "react-hook-form";
import { cn } from "../lib/utils";
import { Input } from "../components/ui/input";
import Error from "./Error";
function InputField({ name, label, rules, className, errorClassName, ...props }) {
const { register, formState: { errors }, } = useFormContext();
const error = errors[name];
return (_jsxs("div", { className: "space-y-2", children: [label && (_jsxs("label", { htmlFor: name, className: "text-sm font-medium", children: [label, rules?.required && _jsx("span", { className: "text-red-600", children: "*" })] })), _jsx(Input, { id: name, ...register(name, rules), "aria-invalid": !!error, className: cn("border", className, {
"border-red-500": error,
}), ...props }), error && (_jsx(Error, { className: cn("", errorClassName), message: error.message }))] }));
}
export default InputField;