@availity/mui-textfield 1.1.0 → 1.1.2

package/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [1.1.2](https://github.com/Availity/element/compare/@availity/mui-textfield@1.1.1...@availity/mui-textfield@1.1.2) (2025-04-04)
+
+
+### Bug Fixes
+
+* **mui-textfield:** ensure helperText props are passed to helperText ([2d3de04](https://github.com/Availity/element/commit/2d3de04393bb0df18d5a8d73cad0ea688f90a0b2))
+
+## [1.1.1](https://github.com/Availity/element/compare/@availity/mui-textfield@1.1.0...@availity/mui-textfield@1.1.1) (2025-03-27)
+
 ## [1.1.0](https://github.com/Availity/element/compare/@availity/mui-textfield@1.0.1...@availity/mui-textfield@1.1.0) (2025-03-21)
 
 ### Dependency Updates

package/dist/index.d.mts

@@ -11,7 +11,15 @@ type TextFieldProps = {
     fullWidth?: boolean;
     /** if `true`, the character counter will display. The maxLength is taken from the `inputProps.maxLength` prop. @default false */
     showCharacterCount?: boolean;
+    /** If `true`, the input maxLength can be exceeded. If validation is required, you'll have to do it manually. @default false */
+    displayOverflowMaxLength?: boolean;
 } & Pick<FormLabelProps, 'helpTopicId'> & Omit<TextFieldProps$1, 'fullWidth' | 'variant'>;
+type TextFieldFormHelperTextProps = {
+    charCount: string;
+    helperText: string;
+    maxLength: string;
+    showCharacterCount: boolean;
+} & FormHelperTextProps;
 declare const TextField: react.ForwardRefExoticComponent<Omit<TextFieldProps, "ref"> & react.RefAttributes<HTMLDivElement | HTMLInputElement>>;
 
-export { TextField, type TextFieldProps };
+export { TextField, type TextFieldFormHelperTextProps, type TextFieldProps };

package/dist/index.d.ts

@@ -11,7 +11,15 @@ type TextFieldProps = {
     fullWidth?: boolean;
     /** if `true`, the character counter will display. The maxLength is taken from the `inputProps.maxLength` prop. @default false */
     showCharacterCount?: boolean;
+    /** If `true`, the input maxLength can be exceeded. If validation is required, you'll have to do it manually. @default false */
+    displayOverflowMaxLength?: boolean;
 } & Pick<FormLabelProps, 'helpTopicId'> & Omit<TextFieldProps$1, 'fullWidth' | 'variant'>;
+type TextFieldFormHelperTextProps = {
+    charCount: string;
+    helperText: string;
+    maxLength: string;
+    showCharacterCount: boolean;
+} & FormHelperTextProps;
 declare const TextField: react.ForwardRefExoticComponent<Omit<TextFieldProps, "ref"> & react.RefAttributes<HTMLDivElement | HTMLInputElement>>;
 
-export { TextField, type TextFieldProps };
+export { TextField, type TextFieldFormHelperTextProps, type TextFieldProps };

package/dist/index.js

@@ -64,7 +64,7 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/lib/TextField.tsx
-var import_react2 = require("react");
+var import_react3 = require("react");
 var import_TextField = __toESM(require("@mui/material/TextField"));
 var import_mui_form_utils = require("@availity/mui-form-utils");
 
@@ -91,15 +91,50 @@ var Grid = (args) => {
 var import_Stack = __toESM(require("@mui/material/Stack"));
 var import_jsx_runtime4 = require("react/jsx-runtime");
 
+// ../typography/src/lib/Typography.tsx
+var import_react2 = require("react");
+var import_Typography = __toESM(require("@mui/material/Typography"));
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var Typography = (0, import_react2.forwardRef)(
+  (_a, ref) => {
+    var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(import_Typography.default, __spreadProps(__spreadValues({}, rest), { ref, children }));
+  }
+);
+
 // src/lib/TextField.tsx
 var import_styles = require("@mui/material/styles");
-var import_jsx_runtime5 = require("react/jsx-runtime");
+var import_jsx_runtime6 = require("react/jsx-runtime");
 var SelectPlaceholder = (0, import_styles.styled)("span", {
   name: "MuiTextField",
   slot: "SelectPlaceholder",
   overridesResolver: (props, styles) => styles.avFilled
 })(({ theme }) => ({ opacity: 1, color: theme.palette.grey[400] }));
-var TextField = (0, import_react2.forwardRef)((props, ref) => {
+var TextFieldFormHelperText = (_a) => {
+  var _b = _a, {
+    charCount,
+    helperText,
+    maxLength,
+    showCharacterCount
+  } = _b, FormHelperTextProps2 = __objRest(_b, [
+    "charCount",
+    "helperText",
+    "maxLength",
+    "showCharacterCount"
+  ]);
+  if (showCharacterCount) {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Grid, { container: true, justifyContent: "space-between", flexWrap: "nowrap", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_mui_form_utils.FormHelperText, __spreadProps(__spreadValues({}, FormHelperTextProps2), { sx: { marginRight: "12px" }, children: helperText })),
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(Typography, { variant: "caption", marginTop: "4px", lineHeight: "1.25rem", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(Typography, { component: "span", variant: "inherit", color: charCount > maxLength ? "error" : "textPrimary", children: charCount || 0 }),
+        "/",
+        maxLength
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_mui_form_utils.FormHelperText, __spreadProps(__spreadValues({}, FormHelperTextProps2), { children: helperText }));
+};
+var TextField = (0, import_react3.forwardRef)((props, ref) => {
   var _b, _c, _d, _e, _f, _g, _h;
   const _a = props, {
     InputProps: InputProps2,
@@ -110,7 +145,8 @@ var TextField = (0, import_react2.forwardRef)((props, ref) => {
     SelectProps: SelectProps2,
     inputProps,
     helperText,
-    showCharacterCount = false
+    showCharacterCount = false,
+    displayOverflowMaxLength = false
   } = _a, rest = __objRest(_a, [
     "InputProps",
     "helpTopicId",
@@ -120,34 +156,32 @@ var TextField = (0, import_react2.forwardRef)((props, ref) => {
     "SelectProps",
     "inputProps",
     "helperText",
-    "showCharacterCount"
+    "showCharacterCount",
+    "displayOverflowMaxLength"
   ]);
-  const [openDetected, setOpenDetected] = (0, import_react2.useState)(false);
-  const [charCount, setCharCount] = (0, import_react2.useState)(0);
+  const [openDetected, setOpenDetected] = (0, import_react3.useState)(false);
+  const [charCount, setCharCount] = (0, import_react3.useState)(0);
+  const maxLength = (inputProps == null ? void 0 : inputProps.maxLength) || ((_c = (_b = rest.slotProps) == null ? void 0 : _b.htmlInput) == null ? void 0 : _c.maxLength);
   const resolvedProps = (props2) => !props2 || Object.keys(props2).length === 0 ? void 0 : props2;
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
     import_TextField.default,
     __spreadProps(__spreadValues({}, rest), {
       onChange: (event) => {
         setCharCount(event.target.value.length);
         if (rest.onChange) rest.onChange(event);
       },
-      helperText: showCharacterCount ? /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Grid, { container: true, justifyContent: "space-between", children: [
-        helperText,
-        " ",
-        /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("span", { style: { marginLeft: 4 }, children: [
-          charCount || 0,
-          "/",
-          (inputProps == null ? void 0 : inputProps.maxLength) || ((_c = (_b = rest.slotProps) == null ? void 0 : _b.htmlInput) == null ? void 0 : _c.maxLength)
-        ] })
-      ] }) : helperText,
-      slots: { formHelperText: import_mui_form_utils.FormHelperText },
+      helperText: helperText || /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, {}),
+      slots: { formHelperText: TextFieldFormHelperText },
       slotProps: {
         input: resolvedProps(__spreadValues(__spreadValues(__spreadValues({}, InputProps2), import_mui_form_utils.InputPropOverrides), (_d = rest.slotProps) == null ? void 0 : _d.input)),
-        htmlInput: resolvedProps(__spreadValues(__spreadValues({ "aria-required": required }, inputProps), (_e = rest.slotProps) == null ? void 0 : _e.htmlInput)),
+        htmlInput: resolvedProps(__spreadProps(__spreadValues(__spreadValues({
+          "aria-required": required
+        }, inputProps), (_e = rest.slotProps) == null ? void 0 : _e.htmlInput), {
+          maxLength: !displayOverflowMaxLength ? maxLength : void 0
+        })),
         select: resolvedProps(__spreadValues(__spreadValues(__spreadValues(__spreadValues({
           displayEmpty: !!rest.placeholder,
-          renderValue: (value) => rest.placeholder && (!value || Array.isArray(value) && value.length === 0) ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(SelectPlaceholder, { className: "MuiSelect-placeholder", children: rest.placeholder }) : value
+          renderValue: (value) => rest.placeholder && (!value || Array.isArray(value) && value.length === 0) ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(SelectPlaceholder, { className: "MuiSelect-placeholder", children: rest.placeholder }) : value
         }, SelectProps2), import_mui_form_utils.SelectPropOverrides), (0, import_mui_form_utils.SelectAccessibilityOverrides)(openDetected, setOpenDetected, SelectProps2 == null ? void 0 : SelectProps2.open)), (_f = rest.slotProps) == null ? void 0 : _f.select)),
         inputLabel: resolvedProps(__spreadValues(__spreadValues({
           component: import_mui_form_utils.FormLabel,
@@ -155,7 +189,15 @@ var TextField = (0, import_react2.forwardRef)((props, ref) => {
           required,
           shrink: true
         }, InputLabelProps), (_g = rest.slotProps) == null ? void 0 : _g.inputLabel)),
-        formHelperText: resolvedProps(__spreadValues(__spreadValues({ component: "div" }, FormHelperTextProps2), (_h = rest.slotProps) == null ? void 0 : _h.formHelperText))
+        formHelperText: resolvedProps(__spreadProps(__spreadValues(__spreadValues({
+          component: "div"
+        }, FormHelperTextProps2), (_h = rest.slotProps) == null ? void 0 : _h.formHelperText), {
+          charCount,
+          helperText,
+          maxLength,
+          displayOverflowMaxLength,
+          showCharacterCount
+        }))
       },
       ref
     })

package/dist/index.mjs

@@ -31,7 +31,7 @@ var __objRest = (source, exclude) => {
 };
 
 // src/lib/TextField.tsx
-import { forwardRef as forwardRef2, useState } from "react";
+import { forwardRef as forwardRef3, useState } from "react";
 import MuiTextField from "@mui/material/TextField";
 import {
   FormHelperText,
@@ -64,15 +64,50 @@ var Grid = (args) => {
 import MuiStack from "@mui/material/Stack";
 import { jsx as jsx4 } from "react/jsx-runtime";
 
+// ../typography/src/lib/Typography.tsx
+import { forwardRef as forwardRef2 } from "react";
+import { default as MuiTypography } from "@mui/material/Typography";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var Typography = forwardRef2(
+  (_a, ref) => {
+    var _b = _a, { children } = _b, rest = __objRest(_b, ["children"]);
+    return /* @__PURE__ */ jsx5(MuiTypography, __spreadProps(__spreadValues({}, rest), { ref, children }));
+  }
+);
+
 // src/lib/TextField.tsx
 import { styled } from "@mui/material/styles";
-import { jsx as jsx5, jsxs } from "react/jsx-runtime";
+import { Fragment, jsx as jsx6, jsxs } from "react/jsx-runtime";
 var SelectPlaceholder = styled("span", {
   name: "MuiTextField",
   slot: "SelectPlaceholder",
   overridesResolver: (props, styles) => styles.avFilled
 })(({ theme }) => ({ opacity: 1, color: theme.palette.grey[400] }));
-var TextField = forwardRef2((props, ref) => {
+var TextFieldFormHelperText = (_a) => {
+  var _b = _a, {
+    charCount,
+    helperText,
+    maxLength,
+    showCharacterCount
+  } = _b, FormHelperTextProps2 = __objRest(_b, [
+    "charCount",
+    "helperText",
+    "maxLength",
+    "showCharacterCount"
+  ]);
+  if (showCharacterCount) {
+    return /* @__PURE__ */ jsxs(Grid, { container: true, justifyContent: "space-between", flexWrap: "nowrap", children: [
+      /* @__PURE__ */ jsx6(FormHelperText, __spreadProps(__spreadValues({}, FormHelperTextProps2), { sx: { marginRight: "12px" }, children: helperText })),
+      /* @__PURE__ */ jsxs(Typography, { variant: "caption", marginTop: "4px", lineHeight: "1.25rem", children: [
+        /* @__PURE__ */ jsx6(Typography, { component: "span", variant: "inherit", color: charCount > maxLength ? "error" : "textPrimary", children: charCount || 0 }),
+        "/",
+        maxLength
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsx6(FormHelperText, __spreadProps(__spreadValues({}, FormHelperTextProps2), { children: helperText }));
+};
+var TextField = forwardRef3((props, ref) => {
   var _b, _c, _d, _e, _f, _g, _h;
   const _a = props, {
     InputProps: InputProps2,
@@ -83,7 +118,8 @@ var TextField = forwardRef2((props, ref) => {
     SelectProps: SelectProps2,
     inputProps,
     helperText,
-    showCharacterCount = false
+    showCharacterCount = false,
+    displayOverflowMaxLength = false
   } = _a, rest = __objRest(_a, [
     "InputProps",
     "helpTopicId",
@@ -93,34 +129,32 @@ var TextField = forwardRef2((props, ref) => {
     "SelectProps",
     "inputProps",
     "helperText",
-    "showCharacterCount"
+    "showCharacterCount",
+    "displayOverflowMaxLength"
   ]);
   const [openDetected, setOpenDetected] = useState(false);
   const [charCount, setCharCount] = useState(0);
+  const maxLength = (inputProps == null ? void 0 : inputProps.maxLength) || ((_c = (_b = rest.slotProps) == null ? void 0 : _b.htmlInput) == null ? void 0 : _c.maxLength);
   const resolvedProps = (props2) => !props2 || Object.keys(props2).length === 0 ? void 0 : props2;
-  return /* @__PURE__ */ jsx5(
+  return /* @__PURE__ */ jsx6(
     MuiTextField,
     __spreadProps(__spreadValues({}, rest), {
       onChange: (event) => {
         setCharCount(event.target.value.length);
         if (rest.onChange) rest.onChange(event);
       },
-      helperText: showCharacterCount ? /* @__PURE__ */ jsxs(Grid, { container: true, justifyContent: "space-between", children: [
-        helperText,
-        " ",
-        /* @__PURE__ */ jsxs("span", { style: { marginLeft: 4 }, children: [
-          charCount || 0,
-          "/",
-          (inputProps == null ? void 0 : inputProps.maxLength) || ((_c = (_b = rest.slotProps) == null ? void 0 : _b.htmlInput) == null ? void 0 : _c.maxLength)
-        ] })
-      ] }) : helperText,
-      slots: { formHelperText: FormHelperText },
+      helperText: helperText || /* @__PURE__ */ jsx6(Fragment, {}),
+      slots: { formHelperText: TextFieldFormHelperText },
       slotProps: {
         input: resolvedProps(__spreadValues(__spreadValues(__spreadValues({}, InputProps2), InputPropOverrides), (_d = rest.slotProps) == null ? void 0 : _d.input)),
-        htmlInput: resolvedProps(__spreadValues(__spreadValues({ "aria-required": required }, inputProps), (_e = rest.slotProps) == null ? void 0 : _e.htmlInput)),
+        htmlInput: resolvedProps(__spreadProps(__spreadValues(__spreadValues({
+          "aria-required": required
+        }, inputProps), (_e = rest.slotProps) == null ? void 0 : _e.htmlInput), {
+          maxLength: !displayOverflowMaxLength ? maxLength : void 0
+        })),
         select: resolvedProps(__spreadValues(__spreadValues(__spreadValues(__spreadValues({
           displayEmpty: !!rest.placeholder,
-          renderValue: (value) => rest.placeholder && (!value || Array.isArray(value) && value.length === 0) ? /* @__PURE__ */ jsx5(SelectPlaceholder, { className: "MuiSelect-placeholder", children: rest.placeholder }) : value
+          renderValue: (value) => rest.placeholder && (!value || Array.isArray(value) && value.length === 0) ? /* @__PURE__ */ jsx6(SelectPlaceholder, { className: "MuiSelect-placeholder", children: rest.placeholder }) : value
         }, SelectProps2), SelectPropOverrides), SelectAccessibilityOverrides(openDetected, setOpenDetected, SelectProps2 == null ? void 0 : SelectProps2.open)), (_f = rest.slotProps) == null ? void 0 : _f.select)),
         inputLabel: resolvedProps(__spreadValues(__spreadValues({
           component: FormLabel,
@@ -128,7 +162,15 @@ var TextField = forwardRef2((props, ref) => {
           required,
           shrink: true
         }, InputLabelProps), (_g = rest.slotProps) == null ? void 0 : _g.inputLabel)),
-        formHelperText: resolvedProps(__spreadValues(__spreadValues({ component: "div" }, FormHelperTextProps2), (_h = rest.slotProps) == null ? void 0 : _h.formHelperText))
+        formHelperText: resolvedProps(__spreadProps(__spreadValues(__spreadValues({
+          component: "div"
+        }, FormHelperTextProps2), (_h = rest.slotProps) == null ? void 0 : _h.formHelperText), {
+          charCount,
+          helperText,
+          maxLength,
+          displayOverflowMaxLength,
+          showCharacterCount
+        }))
       },
       ref
     })

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-textfield",
-  "version": "1.1.0",
+  "version": "1.1.2",
   "description": "Availity MUI Textfield Component - part of the @availity/element design system",
   "keywords": [
     "react",

package/src/lib/TextField.stories.tsx

@@ -29,12 +29,24 @@ export const _TextField: StoryObj<typeof TextField> = {
 };
 
 export const _TextFieldCharacterCount: StoryObj<typeof TextField> = {
-  render: (args: TextFieldProps) => <TextField {...args} />,
+  render: (args: TextFieldProps) => <TextField sx={{ width: 'min-content' }} {...args} />,
+  args: {
+    label: 'Field Label',
+    id: 'test',
+    helpTopicId: '123',
+    showCharacterCount: true,
+    slotProps: { htmlInput: { maxLength: 10 } },
+  },
+};
+
+export const _TextFieldCharacterCountOverflow: StoryObj<typeof TextField> = {
+  render: (args: TextFieldProps) => <TextField sx={{ width: 'min-content' }} {...args} />,
   args: {
     label: 'Field Label',
     id: 'test',
     helpTopicId: '123',
     showCharacterCount: true,
+    displayOverflowMaxLength: true,
     slotProps: { htmlInput: { maxLength: 10 } },
   },
 };

package/src/lib/TextField.test.tsx

@@ -14,12 +14,14 @@ describe('TextField', () => {
         <TextField label="Test" showCharacterCount inputProps={{ 'data-testid': 'testTextField', maxLength: 20 }} />
       );
 
-      expect(getByText('0/20')).toBeTruthy();
+      expect(getByText('0')).toBeTruthy();
+      expect(getByText('/20')).toBeTruthy();
 
       const input = getByTestId('testTextField');
       fireEvent.change(input, { target: { value: 'Some Text' } });
 
-      expect(getByText('9/20')).toBeTruthy();
+      expect(getByText('9')).toBeTruthy();
+      expect(getByText('/20')).toBeTruthy();
 
       fireEvent.change(input, { target: { value: "Some More Text that doesn't fit" } });
 
@@ -34,12 +36,14 @@ describe('TextField', () => {
           slotProps={{ htmlInput: { 'data-testid': 'testTextField', maxLength: 20 } }}
         />
       );
-      expect(getByText('0/20')).toBeTruthy();
+      expect(getByText('0')).toBeTruthy();
+      expect(getByText('/20')).toBeTruthy();
 
       const input = getByTestId('testTextField');
       fireEvent.change(input, { target: { value: 'Some Text' } });
 
-      expect(getByText('9/20')).toBeTruthy();
+      expect(getByText('9')).toBeTruthy();
+      expect(getByText('/20')).toBeTruthy();
 
       fireEvent.change(input, { target: { value: "Some More Text that doesn't fit" } });
 

package/src/lib/TextField.tsx

@@ -12,6 +12,7 @@ import {
   SelectProps,
 } from '@availity/mui-form-utils';
 import { Grid } from '@availity/mui-layout';
+import { Typography } from '@availity/mui-typography';
 import { styled } from '@mui/material/styles';
 
 export type TextFieldProps = {
@@ -23,6 +24,8 @@ export type TextFieldProps = {
   fullWidth?: boolean;
   /** if `true`, the character counter will display. The maxLength is taken from the `inputProps.maxLength` prop. @default false */
   showCharacterCount?: boolean;
+  /** If `true`, the input maxLength can be exceeded. If validation is required, you'll have to do it manually. @default false */
+  displayOverflowMaxLength?: boolean;
 } & Pick<FormLabelProps, 'helpTopicId'> &
   Omit<MuiTextFieldProps, 'fullWidth' | 'variant'>;
 
@@ -32,6 +35,39 @@ const SelectPlaceholder = styled('span', {
   overridesResolver: (props, styles) => styles.avFilled,
 })(({ theme }) => ({ opacity: 1, color: theme.palette.grey[400] }));
 
+export type TextFieldFormHelperTextProps = {
+  charCount: string;
+  helperText: string;
+  maxLength: string;
+  showCharacterCount: boolean;
+} & FormHelperTextProps;
+
+const TextFieldFormHelperText = ({
+  charCount,
+  helperText,
+  maxLength,
+  showCharacterCount,
+  ...FormHelperTextProps
+}: TextFieldFormHelperTextProps) => {
+  if (showCharacterCount) {
+    return (
+      <Grid container justifyContent="space-between" flexWrap="nowrap">
+        <FormHelperText {...FormHelperTextProps} sx={{ marginRight: '12px' }}>
+          {helperText}
+        </FormHelperText>
+        <Typography variant="caption" marginTop="4px" lineHeight="1.25rem">
+          <Typography component="span" variant="inherit" color={charCount > maxLength ? 'error' : 'textPrimary'}>
+            {charCount || 0}
+          </Typography>
+          /{maxLength}
+        </Typography>
+      </Grid>
+    );
+  }
+
+  return <FormHelperText {...FormHelperTextProps}>{helperText}</FormHelperText>;
+};
+
 export const TextField = forwardRef<HTMLDivElement | HTMLInputElement, TextFieldProps>((props, ref) => {
   const {
     InputProps,
@@ -43,11 +79,15 @@ export const TextField = forwardRef<HTMLDivElement | HTMLInputElement, TextField
     inputProps,
     helperText,
     showCharacterCount = false,
+    displayOverflowMaxLength = false,
     ...rest
   } = props;
   const [openDetected, setOpenDetected] = useState(false);
   const [charCount, setCharCount] = useState(0);
 
+  // @ts-expect-error I'm not sure why maxLength is undefined in htmlInput, but it works. There's something weird with the type.
+  const maxLength = inputProps?.maxLength || rest.slotProps?.htmlInput?.maxLength;
+
   const resolvedProps = (props: Record<string, unknown>) =>
     !props || Object.keys(props).length === 0 ? undefined : props;
 
@@ -58,23 +98,16 @@ export const TextField = forwardRef<HTMLDivElement | HTMLInputElement, TextField
         setCharCount(event.target.value.length);
         if (rest.onChange) rest.onChange(event);
       }}
-      helperText={
-        showCharacterCount ? (
-          <Grid container justifyContent="space-between">
-            {helperText}{' '}
-            <span style={{ marginLeft: 4 }}>
-              {/* @ts-expect-error I'm not sure why maxLength is undefined here, but it works.  */}
-              {charCount || 0}/{inputProps?.maxLength || rest.slotProps?.htmlInput?.maxLength}
-            </span>
-          </Grid>
-        ) : (
-          helperText
-        )
-      }
-      slots={{ formHelperText: FormHelperText }}
+      helperText={helperText || <></>}
+      slots={{ formHelperText: TextFieldFormHelperText }}
       slotProps={{
         input: resolvedProps({ ...InputProps, ...InputPropOverrides, ...rest.slotProps?.input }),
-        htmlInput: resolvedProps({ 'aria-required': required, ...inputProps, ...rest.slotProps?.htmlInput }),
+        htmlInput: resolvedProps({
+          'aria-required': required,
+          ...inputProps,
+          ...rest.slotProps?.htmlInput,
+          maxLength: !displayOverflowMaxLength ? maxLength : undefined,
+        }),
         select: resolvedProps({
           displayEmpty: !!rest.placeholder,
           renderValue: (value: unknown) =>
@@ -96,7 +129,16 @@ export const TextField = forwardRef<HTMLDivElement | HTMLInputElement, TextField
           ...InputLabelProps,
           ...rest.slotProps?.inputLabel,
         }),
-        formHelperText: resolvedProps({ component: 'div', ...FormHelperTextProps, ...rest.slotProps?.formHelperText }),
+        formHelperText: resolvedProps({
+          component: 'div',
+          ...FormHelperTextProps,
+          ...rest.slotProps?.formHelperText,
+          charCount,
+          helperText,
+          maxLength,
+          displayOverflowMaxLength,
+          showCharacterCount,
+        }),
       }}
       ref={ref}
     />