From e1c50010bba97139042aae0d3749fabcbe4cdeb3 Mon Sep 17 00:00:00 2001
From: Rui Martins <rmartins90@users.noreply.github.com>
Date: Wed, 8 Jan 2025 15:32:17 +0000
Subject: [PATCH] docs: document maxLength property in TextField component

---
 src/base-field/base-field.tsx         |  7 +++++++
 src/text-field/text-field.stories.mdx | 22 ++++++++++++++++++++++
 src/text-field/text-field.tsx         |  6 ++++++
 3 files changed, 35 insertions(+)

diff --git a/src/base-field/base-field.tsx b/src/base-field/base-field.tsx
index 737135577..fdab785fa 100644
--- a/src/base-field/base-field.tsx
+++ b/src/base-field/base-field.tsx
@@ -190,6 +190,13 @@ type BaseFieldProps = WithEnhancedClassName &
          */
         maxWidth?: BoxProps['maxWidth']
 
+        /**
+         * The maximum number of characters that the input field can accept.
+         * When this limit is reached, the input field will not accept any more characters.
+         * The counter element will turn red when the number of characters is within 10 of the maximum limit.
+         */
+        maxLength?: number
+
         /**
          * Used internally by components composed using `BaseField`. It is not exposed as part of
          * the public props of such components.
diff --git a/src/text-field/text-field.stories.mdx b/src/text-field/text-field.stories.mdx
index d2fcef945..498939447 100644
--- a/src/text-field/text-field.stories.mdx
+++ b/src/text-field/text-field.stories.mdx
@@ -324,3 +324,25 @@ Hence, the description is never needed when the field is not focused anyway.
         <WithTooltipExample />
     </Story>
 </Canvas>
+
+## Max length
+
+The `maxLength` prop is used to limit the number of characters that the user can input. When the user tries to input more characters than the maximum allowed, the field won't accept the input.
+
+export function WithMaxLengthExample() {
+    const [value, setValue] = React.useState('Doist')
+    return (
+        <TextField
+            label="Company name"
+            maxLength={30}
+            value={value}
+            onChange={(event) => setValue(event.currentTarget.value)}
+        />
+    )
+}
+
+<Canvas withToolbar>
+    <Story name="Max Length">
+        <WithMaxLengthExample />
+    </Story>
+</Canvas>
diff --git a/src/text-field/text-field.tsx b/src/text-field/text-field.tsx
index 7ddf583b2..4071c76d8 100644
--- a/src/text-field/text-field.tsx
+++ b/src/text-field/text-field.tsx
@@ -13,6 +13,12 @@ interface TextFieldProps
     type?: TextFieldType
     startSlot?: React.ReactElement | string | number
     endSlot?: React.ReactElement | string | number
+    /**
+     * The maximum number of characters that the input field can accept.
+     * When this limit is reached, the input field will not accept any more characters.
+     * The counter element will turn red when the number of characters is within 10 of the maximum limit.
+     */
+    maxLength?: number
 }
 
 const TextField = React.forwardRef<HTMLInputElement, TextFieldProps>(function TextField(