From 4341e6bcdffaa713b645ecb9f6f3da101f8c914f Mon Sep 17 00:00:00 2001
From: Oliver Bryan <04oliverbryan@gmail.com>
Date: Sat, 10 Jan 2026 18:01:05 +0000
Subject: [PATCH] length indicator on maxLength fields

---
 packages/frontend/src/components/ui/field.tsx |  3 +
 packages/frontend/src/components/ui/input.tsx | 60 ++++++++++++++++---
 2 files changed, 56 insertions(+), 7 deletions(-)

diff --git a/packages/frontend/src/components/ui/field.tsx b/packages/frontend/src/components/ui/field.tsx
index b51e75a..588c9b2 100644
--- a/packages/frontend/src/components/ui/field.tsx
+++ b/packages/frontend/src/components/ui/field.tsx
@@ -13,6 +13,7 @@ export function Field({
     error,
     tabIndex,
     spellcheck,
+    maxLength,
 }: {
     label: string;
     value?: string;
@@ -24,6 +25,7 @@ export function Field({
     error?: string;
     tabIndex?: number;
     spellcheck?: boolean;
+    maxLength?: number;
 }) {
     const [internalTouched, setInternalTouched] = useState(false);
     const isTouched = submitAttempted || internalTouched;
@@ -56,6 +58,7 @@ export function Field({
                 type={hidden ? "password" : "text"}
                 tabIndex={tabIndex}
                 spellCheck={spellcheck}
+                maxLength={maxLength}
             />
             <div className="flex items-end justify-end w-full text-xs mb-0 -mt-1">
                 {error || invalidMessage !== "" ? (
diff --git a/packages/frontend/src/components/ui/input.tsx b/packages/frontend/src/components/ui/input.tsx
index 983aff6..997e2ab 100644
--- a/packages/frontend/src/components/ui/input.tsx
+++ b/packages/frontend/src/components/ui/input.tsx
@@ -3,18 +3,64 @@ import type * as React from "react";
 import { cn } from "@/lib/utils";
 
 function Input({ className, type, ...props }: React.ComponentProps<"input">) {
+    const maxLength = typeof props.maxLength === "number" ? props.maxLength : undefined;
+    const currentLength = typeof props.value === "string" ? props.value.length : undefined;
+
+    const showCounter = typeof maxLength === "number" && maxLength > 0 && typeof currentLength === "number";
+
+    if (!showCounter) {
+        return (
+            <input
+                type={type}
+                data-slot="input"
+                className={cn(
+                    "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+                    "focus-visible:border-ring",
+                    "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+                    className,
+                )}
+                {...props}
+            />
+        );
+    }
+
+    const counterPercent = currentLength / maxLength;
+
     return (
-        <input
-            type={type}
-            data-slot="input"
+        <div
             className={cn(
-                "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input h-9 w-full min-w-0 border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
-                "focus-visible:border-ring",
+                "border-input dark:bg-input/30 flex h-9 w-full min-w-0 items-center border bg-transparent shadow-xs",
+                "transition-[color,box-shadow]",
+                "has-[:focus-visible]:border-ring",
                 "aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive",
+                "aria-invalid:border-destructive",
                 className,
             )}
-            {...props}
-        />
+        >
+            <input
+                type={type}
+                data-slot="input"
+                className={cn(
+                    "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground",
+                    "h-full w-full min-w-0 bg-transparent px-3 py-1 pr-1 text-base outline-none",
+                    "file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium",
+                    "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+                )}
+                {...props}
+            />
+            <span
+                className={cn(
+                    "px-2 text-[11px] tabular-nums",
+                    counterPercent >= 1
+                        ? "text-destructive"
+                        : counterPercent >= 0.8
+                          ? "text-amber-500"
+                          : "text-muted-foreground",
+                )}
+            >
+                {currentLength}/{maxLength}
+            </span>
+        </div>
     );
 }