mui-custom-form
Version:
A versatile React form component utilizing MUI components and react-hook-form.
23 lines • 1.66 kB
JavaScript
import { Checkbox, FormControl, FormControlLabel, FormHelperText, FormLabel, Stack, } from "@mui/material";
import React from "react";
import { Controller } from "react-hook-form";
export const CheckboxGroupField = ({ field, formControl, }) => {
const { control } = formControl;
return (React.createElement(Controller, { name: field.name, control: control, rules: { required: field.required }, render: ({ field: controlField, fieldState: { error } }) => (React.createElement(FormControl, { component: "fieldset", error: !!error },
React.createElement(FormLabel, { component: "legend", required: field.required }, field.label),
React.createElement(Stack, { direction: "row", spacing: 2 }, field.list?.map((option) => (React.createElement(FormControlLabel, { key: option.value, control: React.createElement(Checkbox, { checked: controlField.value?.includes(option.value) || false, onChange: (e) => {
const checked = e.target.checked;
const value = option.value;
if (checked) {
controlField.onChange([
...(controlField.value || []),
value,
]);
}
else {
controlField.onChange((controlField.value || []).filter((v) => v !== value));
}
}, ...field.otherProps }), label: option.label })))),
error && React.createElement(FormHelperText, null, error.message))) }));
};
//# sourceMappingURL=CheckboxGroupField.js.map