ob/sprint
1
0
Fork 0
mirror of https://github.com/hex248/sprint.git synced 2026-02-08 02:33:01 +00:00
Code Issues Packages Projects Releases Wiki Activity

length indicator on maxLength fields

Browse Source
This commit is contained in:
Oliver Bryan
2026-01-10 18:01:05 +00:00
parent 5adf521b1a
commit 4341e6bcdf
2 changed files with 56 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
packages/frontend/src/components/ui/field.tsx
View File

@@ -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 !== "" ? (

60
packages/frontend/src/components/ui/input.tsx
View File

@@ -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>
);
}