Add optional character limit counter to TextField component

packages/ui/src/components/TextField.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { useState } from 'react';
 import { TextField as AriaTextField } from 'react-aria-components';
 import type {
   TextFieldProps as AriaTextFieldProps,
@@ -30,6 +31,7 @@ export interface TextFieldProps extends AriaTextFieldProps {
   labelClassName?: string;
   errorClassName?: string;
   useTextArea?: boolean;
+  maxLength?: number;
 }
 
 export const TextField = ({
@@ -44,17 +46,49 @@ export const TextField = ({
   labelClassName,
   errorClassName,
   useTextArea,
+  maxLength,
   children,
   isRequired, // we pull this out as it conflicts with other form validation libraries
   ...props
 }: TextFieldProps & {
   ref?: React.RefObject<HTMLInputElement | HTMLTextAreaElement | null>;
   children?: React.ReactNode;
 }) => {
+  const isControlled = props.value !== undefined;
+  const [uncontrolledCount, setUncontrolledCount] = useState(
+    () => (props.defaultValue ?? '').length,
+  );
+  const charCount = isControlled
+    ? (props.value?.length ?? 0)
+    : uncontrolledCount;
+
+  const isInvalid = !!errorMessage && errorMessage.length > 0;
+
+  const handleChange = (value: string) => {
+    if (!isControlled) {
+      setUncontrolledCount(value.length);
+    }
+    props.onChange?.(value);
+  };
+
+  const counterElement = maxLength != null && (
+    <span
+      className={cn(
+        'text-sm text-neutral-gray4',
+        'group-data-[disabled=true]:opacity-50',
+        (charCount === maxLength || isInvalid) && 'text-functional-red',
+      )}
+    >
+      {charCount}/{maxLength}
+    </span>
+  );
+
   return (
     <AriaTextField
       {...props}
-      isInvalid={!!errorMessage && errorMessage.length > 0}
+      onChange={handleChange}
+      maxLength={maxLength}
+      isInvalid={isInvalid}
       className={composeTailwindRenderProps(
         props.className,
         'group flex flex-col gap-1',
@@ -94,12 +128,24 @@ export const TextField = ({
         {children}
       </FieldGroup>
 
-      {description && (
-        <Description className={descriptionClassName}>
-          {description}
-        </Description>
+      {description ? (
+        <div className="flex justify-between">
+          <Description className={descriptionClassName}>
+            {description}
+          </Description>
+          {counterElement}
+        </div>
+      ) : (
+        counterElement && (
+          <div className="flex justify-between">
+            <FieldError className={errorClassName}>{errorMessage}</FieldError>
+            {counterElement}
+          </div>
+        )
+      )}
+      {(description || !counterElement) && (
+        <FieldError className={errorClassName}>{errorMessage}</FieldError>
       )}
-      <FieldError className={errorClassName}>{errorMessage}</FieldError>
     </AriaTextField>
   );
 };

packages/ui/stories/TextField.stories.tsx

@@ -60,3 +60,41 @@ export const Validation = (args: any) => (
 Validation.args = {
   isRequired: true,
 };
+
+export const WithCharacterLimit = () => (
+  <div className="flex w-96 flex-col gap-8">
+    <TextField
+      label="Title"
+      description="Enter a title"
+      maxLength={50}
+      inputProps={{ placeholder: 'Placeholder' }}
+    />
+    <TextField
+      label="Description"
+      description="Enter a description"
+      maxLength={250}
+      useTextArea
+      textareaProps={{ placeholder: 'Placeholder' }}
+    />
+    <TextField
+      label="With error"
+      maxLength={50}
+      errorMessage="This field is required"
+      inputProps={{ placeholder: 'Placeholder' }}
+    />
+    <TextField
+      label="With error and helper text"
+      description="Enter a title"
+      maxLength={50}
+      errorMessage="This field is required"
+      inputProps={{ placeholder: 'Placeholder' }}
+    />
+    <TextField
+      label="Disabled"
+      description="Helper text"
+      maxLength={50}
+      isDisabled
+      inputProps={{ placeholder: 'Placeholder' }}
+    />
+  </div>
+);