@availity/mui-controlled-form 0.2.4 → 0.2.5

package/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.2.5](https://github.com/Availity/element/compare/@availity/mui-controlled-form@0.2.4...@availity/mui-controlled-form@0.2.5) (2025-02-05)
+
+
+### Bug Fixes
+
+* **mui-controlled-form:** support required prop object ([6a2282c](https://github.com/Availity/element/commit/6a2282ca0328c7e1ed3d1ace974209123c38f673))
+
 ## [0.2.4](https://github.com/Availity/element/compare/@availity/mui-controlled-form@0.2.3...@availity/mui-controlled-form@0.2.4) (2025-02-05)
 
 

package/dist/index.d.mts

@@ -39,7 +39,7 @@ type ControlledFormProps = {
 declare const ControlledForm: ({ onSubmit, values, schema, validationResolver, ...rest }: ControlledFormProps) => react_jsx_runtime.JSX.Element;
 
 type ControlledDatepickerProps = DatepickerProps & Omit<RegisterOptions<FieldValues, string>, 'disabled' | 'valueAsNumber' | 'valueAsDate' | 'setValueAs'> & Pick<ControllerProps, 'defaultValue' | 'shouldUnregister' | 'name'>;
-declare const ControlledDatepicker: ({ name, defaultValue, deps, max, maxLength, min, minLength, onBlur, onChange, pattern, required, shouldUnregister, validate, value, ...rest }: ControlledDatepickerProps) => react_jsx_runtime.JSX.Element;
+declare const ControlledDatepicker: ({ name, defaultValue, deps, max, maxLength, min, minLength, onBlur, onChange, pattern, required, shouldUnregister, validate, value, FieldProps, ...rest }: ControlledDatepickerProps) => react_jsx_runtime.JSX.Element;
 
 type ControlledInputProps = Omit<InputProps, 'error' | 'name' | 'required'> & {
     name: string;

package/dist/index.d.ts

@@ -39,7 +39,7 @@ type ControlledFormProps = {
 declare const ControlledForm: ({ onSubmit, values, schema, validationResolver, ...rest }: ControlledFormProps) => react_jsx_runtime.JSX.Element;
 
 type ControlledDatepickerProps = DatepickerProps & Omit<RegisterOptions<FieldValues, string>, 'disabled' | 'valueAsNumber' | 'valueAsDate' | 'setValueAs'> & Pick<ControllerProps, 'defaultValue' | 'shouldUnregister' | 'name'>;
-declare const ControlledDatepicker: ({ name, defaultValue, deps, max, maxLength, min, minLength, onBlur, onChange, pattern, required, shouldUnregister, validate, value, ...rest }: ControlledDatepickerProps) => react_jsx_runtime.JSX.Element;
+declare const ControlledDatepicker: ({ name, defaultValue, deps, max, maxLength, min, minLength, onBlur, onChange, pattern, required, shouldUnregister, validate, value, FieldProps, ...rest }: ControlledDatepickerProps) => react_jsx_runtime.JSX.Element;
 
 type ControlledInputProps = Omit<InputProps, 'error' | 'name' | 'required'> & {
     name: string;

package/dist/index.js

@@ -128,6 +128,7 @@ var ControlledAsyncAutocomplete = (_a) => {
         import_mui_autocomplete.AsyncAutocomplete,
         __spreadProps(__spreadValues({}, rest), {
           FieldProps: __spreadProps(__spreadValues({}, FieldProps), {
+            required: typeof required === "object" ? required.value : !!required,
             error: !!errorMessage,
             helperText: errorMessage && typeof errorMessage === "string" ? /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
               errorMessage,
@@ -215,6 +216,7 @@ var ControlledAutocomplete = (_a) => {
         import_mui_autocomplete2.Autocomplete,
         __spreadProps(__spreadValues({}, rest), {
           FieldProps: __spreadProps(__spreadValues({}, FieldProps), {
+            required: typeof required === "object" ? required.value : !!required,
             error: !!errorMessage,
             helperText: errorMessage && typeof errorMessage === "string" ? /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
               errorMessage,
@@ -335,6 +337,7 @@ var ControlledCodesAutocomplete = (_a) => {
         import_mui_autocomplete3.CodesAutocomplete,
         __spreadProps(__spreadValues({}, rest), {
           FieldProps: __spreadProps(__spreadValues({}, FieldProps), {
+            required: typeof required === "object" ? required.value : !!required,
             error: !!errorMessage,
             helperText: errorMessage && typeof errorMessage === "string" ? /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
               errorMessage,
@@ -388,7 +391,8 @@ var ControlledDatepicker = (_a) => {
     required,
     shouldUnregister,
     validate,
-    value
+    value,
+    FieldProps
   } = _b, rest = __objRest(_b, [
     "name",
     "defaultValue",
@@ -403,7 +407,8 @@ var ControlledDatepicker = (_a) => {
     "required",
     "shouldUnregister",
     "validate",
-    "value"
+    "value",
+    "FieldProps"
   ]);
   const { control } = (0, import_react_hook_form6.useFormContext)();
   return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
@@ -427,7 +432,22 @@ var ControlledDatepicker = (_a) => {
         value
       },
       shouldUnregister,
-      render: ({ field: { onChange: onChange2, value: value2 } }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_mui_datepicker.Datepicker, __spreadProps(__spreadValues({}, rest), { onChange: onChange2, value: value2 || null }))
+      render: ({ field: { onChange: onChange2, value: value2 }, fieldState: { error } }) => /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+        import_mui_datepicker.Datepicker,
+        __spreadProps(__spreadValues({}, rest), {
+          FieldProps: __spreadProps(__spreadValues({}, FieldProps), {
+            required: typeof required === "object" ? required.value : !!required,
+            error: !!error,
+            helperText: (error == null ? void 0 : error.message) ? /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(import_jsx_runtime6.Fragment, { children: [
+              error == null ? void 0 : error.message,
+              /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("br", {}),
+              FieldProps == null ? void 0 : FieldProps.helperText
+            ] }) : FieldProps == null ? void 0 : FieldProps.helperText
+          }),
+          onChange: onChange2,
+          value: value2 || null
+        })
+      )
     }
   );
 };
@@ -475,7 +495,7 @@ var ControlledInput = (_a) => {
     import_mui_form_utils.Input,
     __spreadValues(__spreadProps(__spreadValues({}, rest), {
       error: !!getFieldState(name).error,
-      required: !!required
+      required: typeof required === "object" ? required.value : !!required
     }), register(name, {
       required,
       maxLength,
@@ -549,6 +569,7 @@ var ControlledOrganizationAutocomplete = (_a) => {
         import_mui_autocomplete4.OrganizationAutocomplete,
         __spreadProps(__spreadValues({}, rest), {
           FieldProps: __spreadProps(__spreadValues({}, FieldProps), {
+            required: typeof required === "object" ? required.value : !!required,
             error: !!errorMessage,
             helperText: errorMessage && typeof errorMessage === "string" ? /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(import_jsx_runtime8.Fragment, { children: [
               errorMessage,
@@ -636,6 +657,7 @@ var ControlledProviderAutocomplete = (_a) => {
         import_mui_autocomplete5.ProviderAutocomplete,
         __spreadProps(__spreadValues({}, rest), {
           FieldProps: __spreadProps(__spreadValues({}, FieldProps), {
+            required: typeof required === "object" ? required.value : !!required,
             error: !!errorMessage,
             helperText: errorMessage && typeof errorMessage === "string" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(import_jsx_runtime9.Fragment, { children: [
               errorMessage,
@@ -698,7 +720,7 @@ var ControlledRadioGroup = (_a) => {
       rules: { deps, onBlur, onChange, required, shouldUnregister, value },
       shouldUnregister,
       render: ({ field }) => /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_mui_form_utils3.FormControl, { error: !!errorMessage, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_mui_form_utils3.FormLabel, { children: label }),
+        /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_mui_form_utils3.FormLabel, { required: typeof required === "object" ? required.value : !!required, children: label }),
         /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_mui_form_utils2.RadioGroup, __spreadValues(__spreadValues({}, field), rest)),
         /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_mui_form_utils3.FormHelperText, { children: errorMessage && typeof errorMessage === "string" ? /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)(import_jsx_runtime10.Fragment, { children: [
           errorMessage,
@@ -753,7 +775,7 @@ var ControlledSelect = (_a) => {
     import_mui_form_utils4.Select,
     __spreadValues(__spreadProps(__spreadValues({}, rest), {
       error: !!getFieldState(name).error,
-      required: !!required
+      required: typeof required === "object" ? required.value : !!required
     }), register(name, {
       required,
       maxLength,
@@ -819,7 +841,7 @@ var ControlledTextField = (_a) => {
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
     import_mui_textfield.TextField,
     __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, rest), {
-      required: !!required
+      required: typeof required === "object" ? required.value : !!required
     }), register(name, {
       required,
       maxLength,

package/dist/index.mjs

@@ -94,6 +94,7 @@ var ControlledAsyncAutocomplete = (_a) => {
         AsyncAutocomplete,
         __spreadProps(__spreadValues({}, rest), {
           FieldProps: __spreadProps(__spreadValues({}, FieldProps), {
+            required: typeof required === "object" ? required.value : !!required,
             error: !!errorMessage,
             helperText: errorMessage && typeof errorMessage === "string" ? /* @__PURE__ */ jsxs(Fragment, { children: [
               errorMessage,
@@ -181,6 +182,7 @@ var ControlledAutocomplete = (_a) => {
         Autocomplete,
         __spreadProps(__spreadValues({}, rest), {
           FieldProps: __spreadProps(__spreadValues({}, FieldProps), {
+            required: typeof required === "object" ? required.value : !!required,
             error: !!errorMessage,
             helperText: errorMessage && typeof errorMessage === "string" ? /* @__PURE__ */ jsxs2(Fragment2, { children: [
               errorMessage,
@@ -301,6 +303,7 @@ var ControlledCodesAutocomplete = (_a) => {
         CodesAutocomplete,
         __spreadProps(__spreadValues({}, rest), {
           FieldProps: __spreadProps(__spreadValues({}, FieldProps), {
+            required: typeof required === "object" ? required.value : !!required,
             error: !!errorMessage,
             helperText: errorMessage && typeof errorMessage === "string" ? /* @__PURE__ */ jsxs3(Fragment3, { children: [
               errorMessage,
@@ -338,7 +341,7 @@ var ControlledForm = (_a) => {
 // src/lib/Datepicker.tsx
 import { Datepicker } from "@availity/mui-datepicker";
 import { useFormContext as useFormContext5, Controller as Controller4 } from "react-hook-form";
-import { jsx as jsx6 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var ControlledDatepicker = (_a) => {
   var _b = _a, {
     name,
@@ -354,7 +357,8 @@ var ControlledDatepicker = (_a) => {
     required,
     shouldUnregister,
     validate,
-    value
+    value,
+    FieldProps
   } = _b, rest = __objRest(_b, [
     "name",
     "defaultValue",
@@ -369,7 +373,8 @@ var ControlledDatepicker = (_a) => {
     "required",
     "shouldUnregister",
     "validate",
-    "value"
+    "value",
+    "FieldProps"
   ]);
   const { control } = useFormContext5();
   return /* @__PURE__ */ jsx6(
@@ -393,7 +398,22 @@ var ControlledDatepicker = (_a) => {
         value
       },
       shouldUnregister,
-      render: ({ field: { onChange: onChange2, value: value2 } }) => /* @__PURE__ */ jsx6(Datepicker, __spreadProps(__spreadValues({}, rest), { onChange: onChange2, value: value2 || null }))
+      render: ({ field: { onChange: onChange2, value: value2 }, fieldState: { error } }) => /* @__PURE__ */ jsx6(
+        Datepicker,
+        __spreadProps(__spreadValues({}, rest), {
+          FieldProps: __spreadProps(__spreadValues({}, FieldProps), {
+            required: typeof required === "object" ? required.value : !!required,
+            error: !!error,
+            helperText: (error == null ? void 0 : error.message) ? /* @__PURE__ */ jsxs4(Fragment4, { children: [
+              error == null ? void 0 : error.message,
+              /* @__PURE__ */ jsx6("br", {}),
+              FieldProps == null ? void 0 : FieldProps.helperText
+            ] }) : FieldProps == null ? void 0 : FieldProps.helperText
+          }),
+          onChange: onChange2,
+          value: value2 || null
+        })
+      )
     }
   );
 };
@@ -441,7 +461,7 @@ var ControlledInput = (_a) => {
     Input,
     __spreadValues(__spreadProps(__spreadValues({}, rest), {
       error: !!getFieldState(name).error,
-      required: !!required
+      required: typeof required === "object" ? required.value : !!required
     }), register(name, {
       required,
       maxLength,
@@ -464,7 +484,7 @@ var ControlledInput = (_a) => {
 // src/lib/OrganizationAutocomplete.tsx
 import { OrganizationAutocomplete } from "@availity/mui-autocomplete";
 import { useFormContext as useFormContext7, Controller as Controller5 } from "react-hook-form";
-import { Fragment as Fragment4, jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 var ControlledOrganizationAutocomplete = (_a) => {
   var _b = _a, {
     name,
@@ -515,8 +535,9 @@ var ControlledOrganizationAutocomplete = (_a) => {
         OrganizationAutocomplete,
         __spreadProps(__spreadValues({}, rest), {
           FieldProps: __spreadProps(__spreadValues({}, FieldProps), {
+            required: typeof required === "object" ? required.value : !!required,
             error: !!errorMessage,
-            helperText: errorMessage && typeof errorMessage === "string" ? /* @__PURE__ */ jsxs4(Fragment4, { children: [
+            helperText: errorMessage && typeof errorMessage === "string" ? /* @__PURE__ */ jsxs5(Fragment5, { children: [
               errorMessage,
               /* @__PURE__ */ jsx8("br", {}),
               FieldProps == null ? void 0 : FieldProps.helperText
@@ -539,7 +560,7 @@ var ControlledOrganizationAutocomplete = (_a) => {
 // src/lib/ProviderAutocomplete.tsx
 import { ProviderAutocomplete } from "@availity/mui-autocomplete";
 import { useFormContext as useFormContext8, Controller as Controller6 } from "react-hook-form";
-import { Fragment as Fragment5, jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+import { Fragment as Fragment6, jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 var ControlledProviderAutocomplete = (_a) => {
   var _b = _a, {
     name,
@@ -602,8 +623,9 @@ var ControlledProviderAutocomplete = (_a) => {
         ProviderAutocomplete,
         __spreadProps(__spreadValues({}, rest), {
           FieldProps: __spreadProps(__spreadValues({}, FieldProps), {
+            required: typeof required === "object" ? required.value : !!required,
             error: !!errorMessage,
-            helperText: errorMessage && typeof errorMessage === "string" ? /* @__PURE__ */ jsxs5(Fragment5, { children: [
+            helperText: errorMessage && typeof errorMessage === "string" ? /* @__PURE__ */ jsxs6(Fragment6, { children: [
               errorMessage,
               /* @__PURE__ */ jsx9("br", {}),
               FieldProps == null ? void 0 : FieldProps.helperText
@@ -627,7 +649,7 @@ var ControlledProviderAutocomplete = (_a) => {
 import { RadioGroup } from "@availity/mui-form-utils";
 import { useFormContext as useFormContext9, Controller as Controller7 } from "react-hook-form";
 import { FormControl, FormLabel, FormHelperText } from "@availity/mui-form-utils";
-import { Fragment as Fragment6, jsx as jsx10, jsxs as jsxs6 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx10, jsxs as jsxs7 } from "react/jsx-runtime";
 var ControlledRadioGroup = (_a) => {
   var _b = _a, {
     name,
@@ -663,10 +685,10 @@ var ControlledRadioGroup = (_a) => {
       defaultValue,
       rules: { deps, onBlur, onChange, required, shouldUnregister, value },
       shouldUnregister,
-      render: ({ field }) => /* @__PURE__ */ jsxs6(FormControl, { error: !!errorMessage, children: [
-        /* @__PURE__ */ jsx10(FormLabel, { children: label }),
+      render: ({ field }) => /* @__PURE__ */ jsxs7(FormControl, { error: !!errorMessage, children: [
+        /* @__PURE__ */ jsx10(FormLabel, { required: typeof required === "object" ? required.value : !!required, children: label }),
         /* @__PURE__ */ jsx10(RadioGroup, __spreadValues(__spreadValues({}, field), rest)),
-        /* @__PURE__ */ jsx10(FormHelperText, { children: errorMessage && typeof errorMessage === "string" ? /* @__PURE__ */ jsxs6(Fragment6, { children: [
+        /* @__PURE__ */ jsx10(FormHelperText, { children: errorMessage && typeof errorMessage === "string" ? /* @__PURE__ */ jsxs7(Fragment7, { children: [
           errorMessage,
           /* @__PURE__ */ jsx10("br", {}),
           helperText
@@ -719,7 +741,7 @@ var ControlledSelect = (_a) => {
     Select,
     __spreadValues(__spreadProps(__spreadValues({}, rest), {
       error: !!getFieldState(name).error,
-      required: !!required
+      required: typeof required === "object" ? required.value : !!required
     }), register(name, {
       required,
       maxLength,
@@ -742,7 +764,7 @@ var ControlledSelect = (_a) => {
 // src/lib/TextField.tsx
 import { TextField } from "@availity/mui-textfield";
 import { useFormContext as useFormContext11 } from "react-hook-form";
-import { Fragment as Fragment7, jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
 var ControlledTextField = (_a) => {
   var _b = _a, {
     name,
@@ -785,7 +807,7 @@ var ControlledTextField = (_a) => {
   return /* @__PURE__ */ jsx12(
     TextField,
     __spreadProps(__spreadValues(__spreadProps(__spreadValues({}, rest), {
-      required: !!required
+      required: typeof required === "object" ? required.value : !!required
     }), register(name, {
       required,
       maxLength,
@@ -803,7 +825,7 @@ var ControlledTextField = (_a) => {
       deps
     })), {
       error: !!getFieldState(name).error,
-      helperText: errorMessage && typeof errorMessage === "string" ? /* @__PURE__ */ jsxs7(Fragment7, { children: [
+      helperText: errorMessage && typeof errorMessage === "string" ? /* @__PURE__ */ jsxs8(Fragment8, { children: [
         errorMessage,
         /* @__PURE__ */ jsx12("br", {}),
         helperText

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-controlled-form",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "description": "Availity MUI ControlledForm Component - part of the @availity/element design system",
   "keywords": [
     "react",

package/src/lib/AsyncAutocomplete.tsx

@@ -62,6 +62,7 @@ export const ControlledAsyncAutocomplete = <
           {...rest}
           FieldProps={{
             ...FieldProps,
+            required: typeof required === 'object' ? required.value : !!required,
             error: !!errorMessage,
             helperText:
               errorMessage && typeof errorMessage === 'string' ? (

package/src/lib/Autocomplete.tsx

@@ -66,6 +66,7 @@ export const ControlledAutocomplete = <
           {...rest}
           FieldProps={{
             ...FieldProps,
+            required: typeof required === 'object' ? required.value : !!required,
             error: !!errorMessage,
             helperText:
               errorMessage && typeof errorMessage === 'string' ? (

package/src/lib/CodesAutocomplete.tsx

@@ -46,6 +46,7 @@ export const ControlledCodesAutocomplete = ({
           {...rest}
           FieldProps={{
             ...FieldProps,
+            required: typeof required === 'object' ? required.value : !!required,
             error: !!errorMessage,
             helperText:
               errorMessage && typeof errorMessage === 'string' ? (

package/src/lib/Datepicker.tsx

@@ -20,6 +20,7 @@ export const ControlledDatepicker = ({
   shouldUnregister,
   validate,
   value,
+  FieldProps,
   ...rest
 }: ControlledDatepickerProps) => {
   const { control } = useFormContext();
@@ -43,7 +44,27 @@ export const ControlledDatepicker = ({
         value,
       }}
       shouldUnregister={shouldUnregister}
-      render={({ field: { onChange, value } }) => <Datepicker {...rest} onChange={onChange} value={value || null} />}
+      render={({ field: { onChange, value }, fieldState: { error } }) => (
+        <Datepicker
+          {...rest}
+          FieldProps={{
+            ...FieldProps,
+            required: typeof required === 'object' ? required.value : !!required,
+            error: !!error,
+            helperText: error?.message ? (
+              <>
+                {error?.message}
+                <br />
+                {FieldProps?.helperText}
+              </>
+            ) : (
+              FieldProps?.helperText
+            ),
+          }}
+          onChange={onChange}
+          value={value || null}
+        />
+      )}
     />
   );
 };

package/src/lib/Input.tsx

@@ -29,7 +29,7 @@ export const ControlledInput = ({
     <Input
       {...rest}
       error={!!getFieldState(name).error}
-      required={!!required}
+      required={typeof required === 'object' ? required.value : !!required}
       {...register(name, {
         required,
         maxLength,

package/src/lib/OrganizationAutocomplete.tsx

@@ -45,6 +45,7 @@ export const ControlledOrganizationAutocomplete = ({
           {...rest}
           FieldProps={{
             ...FieldProps,
+            required: typeof required === 'object' ? required.value : !!required,
             error: !!errorMessage,
             helperText:
               errorMessage && typeof errorMessage === 'string' ? (

package/src/lib/ProviderAutocomplete.tsx

@@ -50,6 +50,7 @@ export const ControlledProviderAutocomplete = ({
           {...rest}
           FieldProps={{
             ...FieldProps,
+            required: typeof required === 'object' ? required.value : !!required,
             error: !!errorMessage,
             helperText:
               errorMessage && typeof errorMessage === 'string' ? (

package/src/lib/RadioGroup.tsx

@@ -45,7 +45,7 @@ export const ControlledRadioGroup = ({
       shouldUnregister={shouldUnregister}
       render={({ field }) => (
         <FormControl error={!!errorMessage}>
-          <FormLabel>{label}</FormLabel>
+          <FormLabel required={typeof required === 'object' ? required.value : !!required}>{label}</FormLabel>
           <RadioGroup {...field} {...rest} />
           <FormHelperText>
             {errorMessage && typeof errorMessage === 'string' ? (

package/src/lib/Select.tsx

@@ -30,7 +30,7 @@ export const ControlledSelect = ({
     <Select
       {...rest}
       error={!!getFieldState(name).error}
-      required={!!required}
+      required={typeof required === 'object' ? required.value : !!required}
       {...register(name, {
         required,
         maxLength,

package/src/lib/TextField.tsx

@@ -31,7 +31,7 @@ export const ControlledTextField = ({
   return (
     <TextField
       {...rest}
-      required={!!required}
+      required={typeof required === 'object' ? required.value : !!required}
       {...register(name, {
         required,
         maxLength,