@availity/mui-textfield 1.0.1 → 1.1.1

package/CHANGELOG.md

@@ -2,6 +2,19 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [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
+
+* `mui-form-utils` updated to version `1.0.1`
+
+### Features
+
+* **mui-textfield, mui-form-utils:** add placeholder support to select ([3a6b1ef](https://github.com/Availity/element/commit/3a6b1ef2e5ceedca632bd1916734e56402371ffb))
+* **mui-textfield:** add optional character count to textfield ([1c3f0dc](https://github.com/Availity/element/commit/1c3f0dc886e153c79afc81c98b3326ed8990b305))
+
 ## [1.0.1](https://github.com/Availity/element/compare/@availity/mui-textfield@1.0.0...@availity/mui-textfield@1.0.1) (2025-03-07)
 
 ### Dependency Updates

package/dist/index.d.mts

@@ -9,7 +9,17 @@ type TextFieldProps = {
     SelectProps?: SelectProps;
     /** If `true`, the input will take up the full width of its container. @default true */
     fullWidth?: boolean;
-} & Pick<FormLabelProps, 'helpTopicId'> & Omit<TextFieldProps$1, 'fullWidth' | 'variant' | 'slotProps'>;
+    /** 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;
+};
 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

@@ -9,7 +9,17 @@ type TextFieldProps = {
     SelectProps?: SelectProps;
     /** If `true`, the input will take up the full width of its container. @default true */
     fullWidth?: boolean;
-} & Pick<FormLabelProps, 'helpTopicId'> & Omit<TextFieldProps$1, 'fullWidth' | 'variant' | 'slotProps'>;
+    /** 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;
+};
 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,27 +64,134 @@ __export(index_exports, {
 module.exports = __toCommonJS(index_exports);
 
 // src/lib/TextField.tsx
-var import_react = 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");
+
+// ../layout/src/lib/Box.tsx
+var import_react = require("react");
+var import_Box = __toESM(require("@mui/material/Box"));
 var import_jsx_runtime = require("react/jsx-runtime");
-var TextField = (0, import_react.forwardRef)((props, ref) => {
-  const _a = props, { InputProps: InputProps2, helpTopicId, InputLabelProps, FormHelperTextProps: FormHelperTextProps2, required, SelectProps: SelectProps2, inputProps } = _a, rest = __objRest(_a, ["InputProps", "helpTopicId", "InputLabelProps", "FormHelperTextProps", "required", "SelectProps", "inputProps"]);
-  const [openDetected, setOpenDetected] = (0, import_react.useState)(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+var Box = (0, import_react.forwardRef)((props, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_Box.default, __spreadProps(__spreadValues({}, props), { ref }));
+});
+
+// ../layout/src/lib/Container.tsx
+var import_Container = __toESM(require("@mui/material/Container"));
+var import_jsx_runtime2 = require("react/jsx-runtime");
+
+// ../layout/src/lib/Grid.tsx
+var import_Grid2 = __toESM(require("@mui/material/Grid2"));
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var Grid = (args) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_Grid2.default, __spreadValues({}, args));
+};
+
+// ../layout/src/lib/Stack.tsx
+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_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 TextFieldFormHelperText = ({
+  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, { 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, { children: helperText });
+};
+var TextField = (0, import_react3.forwardRef)((props, ref) => {
+  var _b, _c, _d, _e, _f, _g, _h;
+  const _a = props, {
+    InputProps: InputProps2,
+    helpTopicId,
+    InputLabelProps,
+    FormHelperTextProps: FormHelperTextProps2,
+    required,
+    SelectProps: SelectProps2,
+    inputProps,
+    helperText,
+    showCharacterCount = false,
+    displayOverflowMaxLength = false
+  } = _a, rest = __objRest(_a, [
+    "InputProps",
+    "helpTopicId",
+    "InputLabelProps",
+    "FormHelperTextProps",
+    "required",
+    "SelectProps",
+    "inputProps",
+    "helperText",
+    "showCharacterCount",
+    "displayOverflowMaxLength"
+  ]);
+  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_runtime6.jsx)(
     import_TextField.default,
     __spreadProps(__spreadValues({}, rest), {
+      onChange: (event) => {
+        setCharCount(event.target.value.length);
+        if (rest.onChange) rest.onChange(event);
+      },
+      helperText: helperText || /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_jsx_runtime6.Fragment, {}),
+      slots: { formHelperText: TextFieldFormHelperText },
       slotProps: {
-        input: __spreadValues(__spreadValues({}, InputProps2), import_mui_form_utils.InputPropOverrides),
-        htmlInput: __spreadValues({ "aria-required": required }, inputProps),
-        select: __spreadValues(__spreadValues(__spreadValues({}, SelectProps2), import_mui_form_utils.SelectPropOverrides), (0, import_mui_form_utils.SelectAccessibilityOverrides)(openDetected, setOpenDetected, SelectProps2 == null ? void 0 : SelectProps2.open)),
-        inputLabel: __spreadValues({
+        input: resolvedProps(__spreadValues(__spreadValues(__spreadValues({}, InputProps2), import_mui_form_utils.InputPropOverrides), (_d = rest.slotProps) == null ? void 0 : _d.input)),
+        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_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,
           helpTopicId,
           required,
           shrink: true
-        }, InputLabelProps),
-        formHelperText: __spreadValues({ component: import_mui_form_utils.FormHelperText }, FormHelperTextProps2)
+        }, InputLabelProps), (_g = rest.slotProps) == null ? void 0 : _g.inputLabel)),
+        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, useState } from "react";
+import { forwardRef as forwardRef3, useState } from "react";
 import MuiTextField from "@mui/material/TextField";
 import {
   FormHelperText,
@@ -40,24 +40,131 @@ import {
   SelectAccessibilityOverrides,
   SelectPropOverrides
 } from "@availity/mui-form-utils";
+
+// ../layout/src/lib/Box.tsx
+import { forwardRef } from "react";
+import MuiBox from "@mui/material/Box";
 import { jsx } from "react/jsx-runtime";
-var TextField = forwardRef((props, ref) => {
-  const _a = props, { InputProps: InputProps2, helpTopicId, InputLabelProps, FormHelperTextProps: FormHelperTextProps2, required, SelectProps: SelectProps2, inputProps } = _a, rest = __objRest(_a, ["InputProps", "helpTopicId", "InputLabelProps", "FormHelperTextProps", "required", "SelectProps", "inputProps"]);
+var Box = forwardRef((props, ref) => {
+  return /* @__PURE__ */ jsx(MuiBox, __spreadProps(__spreadValues({}, props), { ref }));
+});
+
+// ../layout/src/lib/Container.tsx
+import MuiContainer from "@mui/material/Container";
+import { jsx as jsx2 } from "react/jsx-runtime";
+
+// ../layout/src/lib/Grid.tsx
+import MuiGrid2 from "@mui/material/Grid2";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var Grid = (args) => {
+  return /* @__PURE__ */ jsx3(MuiGrid2, __spreadValues({}, args));
+};
+
+// ../layout/src/lib/Stack.tsx
+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 { 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 TextFieldFormHelperText = ({
+  charCount,
+  helperText,
+  maxLength,
+  showCharacterCount
+}) => {
+  if (showCharacterCount) {
+    return /* @__PURE__ */ jsxs(Grid, { container: true, justifyContent: "space-between", flexWrap: "nowrap", children: [
+      /* @__PURE__ */ jsx6(FormHelperText, { 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, { children: helperText });
+};
+var TextField = forwardRef3((props, ref) => {
+  var _b, _c, _d, _e, _f, _g, _h;
+  const _a = props, {
+    InputProps: InputProps2,
+    helpTopicId,
+    InputLabelProps,
+    FormHelperTextProps: FormHelperTextProps2,
+    required,
+    SelectProps: SelectProps2,
+    inputProps,
+    helperText,
+    showCharacterCount = false,
+    displayOverflowMaxLength = false
+  } = _a, rest = __objRest(_a, [
+    "InputProps",
+    "helpTopicId",
+    "InputLabelProps",
+    "FormHelperTextProps",
+    "required",
+    "SelectProps",
+    "inputProps",
+    "helperText",
+    "showCharacterCount",
+    "displayOverflowMaxLength"
+  ]);
   const [openDetected, setOpenDetected] = useState(false);
-  return /* @__PURE__ */ jsx(
+  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__ */ jsx6(
     MuiTextField,
     __spreadProps(__spreadValues({}, rest), {
+      onChange: (event) => {
+        setCharCount(event.target.value.length);
+        if (rest.onChange) rest.onChange(event);
+      },
+      helperText: helperText || /* @__PURE__ */ jsx6(Fragment, {}),
+      slots: { formHelperText: TextFieldFormHelperText },
       slotProps: {
-        input: __spreadValues(__spreadValues({}, InputProps2), InputPropOverrides),
-        htmlInput: __spreadValues({ "aria-required": required }, inputProps),
-        select: __spreadValues(__spreadValues(__spreadValues({}, SelectProps2), SelectPropOverrides), SelectAccessibilityOverrides(openDetected, setOpenDetected, SelectProps2 == null ? void 0 : SelectProps2.open)),
-        inputLabel: __spreadValues({
+        input: resolvedProps(__spreadValues(__spreadValues(__spreadValues({}, InputProps2), InputPropOverrides), (_d = rest.slotProps) == null ? void 0 : _d.input)),
+        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__ */ 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,
           helpTopicId,
           required,
           shrink: true
-        }, InputLabelProps),
-        formHelperText: __spreadValues({ component: FormHelperText }, FormHelperTextProps2)
+        }, InputLabelProps), (_g = rest.slotProps) == null ? void 0 : _g.inputLabel)),
+        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.0.1",
+  "version": "1.1.1",
   "description": "Availity MUI Textfield Component - part of the @availity/element design system",
   "keywords": [
     "react",
@@ -40,7 +40,7 @@
     "publish:canary": "yarn npm publish --access public --tag canary"
   },
   "dependencies": {
-    "@availity/mui-form-utils": "1.0.1",
+    "@availity/mui-form-utils": "1.1.0",
     "@availity/mui-icon": "1.0.1"
   },
   "devDependencies": {

package/src/lib/TextField.stories.tsx

@@ -17,25 +17,37 @@ const meta: Meta<typeof TextField> = {
   title: 'Form Components/TextField/TextField',
   component: TextField,
   tags: ['autodocs'],
-  args: {
-    helperText: 'Helper Text',
-    fullWidth: false,
-  },
-  argTypes: {
-    helperText: {
-      type: 'string',
-    },
-  },
+  args: { helperText: 'Helper Text', fullWidth: false },
+  argTypes: { helperText: { type: 'string' } },
 };
 
 export default meta;
 
 export const _TextField: StoryObj<typeof TextField> = {
   render: (args: TextFieldProps) => <TextField {...args} />,
+  args: { label: 'Field Label', id: 'test', helpTopicId: '123' },
+};
+
+export const _TextFieldCharacterCount: StoryObj<typeof TextField> = {
+  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 } },
   },
 };
 
@@ -48,9 +60,7 @@ export const _States: StoryObj<typeof TextField> = {
       <TextField label="Disabled" id="disabled" disabled {...args} />
     </Stack>
   ),
-  args: {
-    margin: 'normal',
-  },
+  args: { margin: 'normal' },
 };
 
 export const _Sizes: StoryObj<typeof TextField> = {
@@ -60,9 +70,7 @@ export const _Sizes: StoryObj<typeof TextField> = {
       <TextField label="Medium" id="medium" size="medium" {...args} />
     </Stack>
   ),
-  args: {
-    margin: 'normal',
-  },
+  args: { margin: 'normal' },
 };
 
 export const _WithIcon: StoryObj<typeof TextField> = {
@@ -158,9 +166,7 @@ const TextMaskCustom = forwardRef<HTMLInputElement, CustomProps>(function TextMa
     <IMaskInput
       {...other}
       mask="(#00) 000-0000"
-      definitions={{
-        '#': /[1-9]/,
-      }}
+      definitions={{ '#': /[1-9]/ }}
       inputRef={ref}
       onAccept={(value: any) => onChange({ target: { name: props.name, value } })}
       overwrite
@@ -176,12 +182,7 @@ const NumericFormatCustom = forwardRef<NumericFormatProps, CustomProps>(function
       {...other}
       getInputRef={ref}
       onValueChange={(values) => {
-        onChange({
-          target: {
-            name: props.name,
-            value: values.value,
-          },
-        });
+        onChange({ target: { name: props.name, value: values.value } });
       }}
       thousandSeparator
       valueIsNumericString
@@ -251,16 +252,10 @@ export const _InputMasking: StoryObj<typeof TextField> = {
 
     // ---------------------------------------
 
-    const [values, setValues] = useState({
-      textmask: '(100) 000-0000',
-      numberformat: '1320',
-    });
+    const [values, setValues] = useState({ textmask: '(100) 000-0000', numberformat: '1320' });
 
     const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-      setValues({
-        ...values,
-        [event.target.name]: event.target.value,
-      });
+      setValues({ ...values, [event.target.name]: event.target.value });
     };
 
     return (
@@ -306,9 +301,26 @@ export const _Select: StoryObj<typeof TextField> = {
       </TextField>
     );
   },
-  args: {
-    label: 'Select',
+  args: { label: 'Select' },
+};
+
+export const _SelectPlaceholder: StoryObj<typeof TextField> = {
+  render: (args: TextFieldProps) => {
+    const [count, setCount] = useState('');
+
+    const handleChange = (event: SelectChangeEvent) => {
+      setCount(event.target.value as string);
+    };
+
+    return (
+      <TextField value={count} select SelectProps={{ onChange: handleChange }} {...args}>
+        <MenuItem value={10}>10</MenuItem>
+        <MenuItem value={20}>20</MenuItem>
+        <MenuItem value={30}>30</MenuItem>
+      </TextField>
+    );
   },
+  args: { label: 'Select', placeholder: 'Select...' },
 };
 
 export const _MultiSelect: StoryObj<typeof TextField> = {
@@ -351,7 +363,5 @@ export const _MultiSelect: StoryObj<typeof TextField> = {
       </TextField>
     );
   },
-  args: {
-    label: 'MultiSelect',
-  },
+  args: { label: 'MultiSelect' },
 };

package/src/lib/TextField.test.tsx

@@ -1,4 +1,5 @@
-import { render } from '@testing-library/react';
+import { render, fireEvent } from '@testing-library/react';
+import { MenuItem } from '@availity/mui-menu';
 import { TextField } from './TextField';
 
 describe('TextField', () => {
@@ -6,4 +7,59 @@ describe('TextField', () => {
     const { getByLabelText } = render(<TextField label="Test" />);
     expect(getByLabelText('Test')).toBeTruthy();
   });
+
+  describe('TextField character counter', () => {
+    test('should render character counter successfully via inputProps', () => {
+      const { getByText, getByTestId, getByTitle } = render(
+        <TextField label="Test" showCharacterCount inputProps={{ 'data-testid': 'testTextField', maxLength: 20 }} />
+      );
+
+      expect(getByText('0')).toBeTruthy();
+      expect(getByText('/20')).toBeTruthy();
+
+      const input = getByTestId('testTextField');
+      fireEvent.change(input, { target: { value: 'Some Text' } });
+
+      expect(getByText('9')).toBeTruthy();
+      expect(getByText('/20')).toBeTruthy();
+
+      fireEvent.change(input, { target: { value: "Some More Text that doesn't fit" } });
+
+      expect(getByTitle('Error')).toBeTruthy();
+    });
+
+    test('should render character counter successfully via slotProps', () => {
+      const { getByText, getByTestId, getByTitle } = render(
+        <TextField
+          label="Test"
+          showCharacterCount
+          slotProps={{ htmlInput: { 'data-testid': 'testTextField', maxLength: 20 } }}
+        />
+      );
+      expect(getByText('0')).toBeTruthy();
+      expect(getByText('/20')).toBeTruthy();
+
+      const input = getByTestId('testTextField');
+      fireEvent.change(input, { target: { value: 'Some Text' } });
+
+      expect(getByText('9')).toBeTruthy();
+      expect(getByText('/20')).toBeTruthy();
+
+      fireEvent.change(input, { target: { value: "Some More Text that doesn't fit" } });
+
+      expect(getByTitle('Error')).toBeTruthy();
+    });
+  });
+  describe('TextField select placeholder', () => {
+    test('should render select placeholder successfully', () => {
+      const { getByText } = render(
+        <TextField label="Test" select placeholder="Select...">
+          <MenuItem value={10}>10</MenuItem>
+          <MenuItem value={20}>20</MenuItem>
+          <MenuItem value={30}>30</MenuItem>
+        </TextField>
+      );
+      expect(getByText('Select...')).toBeTruthy();
+    });
+  });
 });

package/src/lib/TextField.tsx

@@ -11,6 +11,9 @@ import {
   SelectPropOverrides,
   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 = {
   FormHelperTextProps?: FormHelperTextProps;
@@ -19,33 +22,120 @@ export type TextFieldProps = {
   SelectProps?: SelectProps;
   /** If `true`, the input will take up the full width of its container. @default true */
   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' | 'slotProps'>;
+  Omit<MuiTextFieldProps, 'fullWidth' | 'variant'>;
+
+const SelectPlaceholder = styled('span', {
+  name: 'MuiTextField',
+  slot: 'SelectPlaceholder',
+  overridesResolver: (props, styles) => styles.avFilled,
+})(({ theme }) => ({ opacity: 1, color: theme.palette.grey[400] }));
+
+export type TextFieldFormHelperTextProps = {
+  charCount: string;
+  helperText: string;
+  maxLength: string;
+  showCharacterCount: boolean;
+};
+
+const TextFieldFormHelperText = ({
+  charCount,
+  helperText,
+  maxLength,
+  showCharacterCount,
+}: TextFieldFormHelperTextProps) => {
+  if (showCharacterCount) {
+    return (
+      <Grid container justifyContent="space-between" flexWrap="nowrap">
+        <FormHelperText 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>{helperText}</FormHelperText>;
+};
 
 export const TextField = forwardRef<HTMLDivElement | HTMLInputElement, TextFieldProps>((props, ref) => {
-  const { InputProps, helpTopicId, InputLabelProps, FormHelperTextProps, required, SelectProps, inputProps, ...rest } =
-    props;
+  const {
+    InputProps,
+    helpTopicId,
+    InputLabelProps,
+    FormHelperTextProps,
+    required,
+    SelectProps,
+    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;
 
   return (
     <MuiTextField
       {...rest}
+      onChange={(event) => {
+        setCharCount(event.target.value.length);
+        if (rest.onChange) rest.onChange(event);
+      }}
+      helperText={helperText || <></>}
+      slots={{ formHelperText: TextFieldFormHelperText }}
       slotProps={{
-        input: { ...InputProps, ...InputPropOverrides },
-        htmlInput: { 'aria-required': required, ...inputProps },
-        select: {
+        input: resolvedProps({ ...InputProps, ...InputPropOverrides, ...rest.slotProps?.input }),
+        htmlInput: resolvedProps({
+          'aria-required': required,
+          ...inputProps,
+          ...rest.slotProps?.htmlInput,
+          maxLength: !displayOverflowMaxLength ? maxLength : undefined,
+        }),
+        select: resolvedProps({
+          displayEmpty: !!rest.placeholder,
+          renderValue: (value: unknown) =>
+            rest.placeholder && (!value || (Array.isArray(value) && value.length === 0)) ? (
+              <SelectPlaceholder className="MuiSelect-placeholder">{rest.placeholder}</SelectPlaceholder>
+            ) : (
+              value
+            ),
           ...SelectProps,
           ...SelectPropOverrides,
           ...SelectAccessibilityOverrides(openDetected, setOpenDetected, SelectProps?.open),
-        },
-        inputLabel: {
+          ...rest.slotProps?.select,
+        }),
+        inputLabel: resolvedProps({
           component: FormLabel,
           helpTopicId: helpTopicId,
           required,
           shrink: true,
           ...InputLabelProps,
-        },
-        formHelperText: { component: FormHelperText, ...FormHelperTextProps },
+          ...rest.slotProps?.inputLabel,
+        }),
+        formHelperText: resolvedProps({
+          component: 'div',
+          ...FormHelperTextProps,
+          ...rest.slotProps?.formHelperText,
+          charCount,
+          helperText,
+          maxLength,
+          displayOverflowMaxLength,
+          showCharacterCount,
+        }),
       }}
       ref={ref}
     />