@marlon-chaviano/field-kit
Version:
A collection of reusable and accessible form components built with React, TailwindCSS, and fully integrated with React Hook Form...
15 lines (14 loc) • 1.45 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useController, useFormContext, } from "react-hook-form";
import { Label } from "../components/ui/label";
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue, } from "../components/ui/select";
import { cn } from "../lib/utils";
import Error from "./Error";
function SelectField({ name, options, rules, className, placeholder, triggerClassName, wrapperClassName, errorClassName, label, ...props }) {
const { control } = useFormContext();
const { field, fieldState: { error }, } = useController({ name, control, rules });
return (_jsxs("div", { className: cn("", wrapperClassName), children: [label && (_jsxs(Label, { className: "mb-2 block font-medium", htmlFor: name, children: [label, rules?.required && _jsx("span", { className: "text-red-600", children: "*" })] })), _jsxs(Select, { ...props, value: field.value, onValueChange: field.onChange, children: [_jsx(SelectTrigger, { className: cn("border", triggerClassName, {
"border-red-500": error,
}), id: name, children: _jsx(SelectValue, { placeholder: placeholder }) }), _jsx(SelectContent, { children: options.map((option) => (_jsx(SelectItem, { value: option.value, children: option.label }, option.value))) })] }), error && (_jsx(Error, { className: cn("", errorClassName), message: error.message }))] }));
}
export default SelectField;