TextField

Usage

import TextField from "@repo/ui/TextField";

<TextField />;

Installation

npx the-dig@latest add TextField

Props

size replaces the native input size attribute. isCleanIcon only shows the clean affordance; controlled consumers should clear their value in onClean. hasError is visual, so associate an external error message with aria-describedby.

Prop	Type	Default
variant	"primary" | "secondary"	"primary"
hasError	boolean	false
startAdornment	ReactNode	-
endAdornment	ReactNode	-
size	"xs" | "sm" | "md" | "lg"| "xl"	md
className	string	-
isCleanIcon	boolean	false
onClean	function	-
inputWrapperProps	HTMLAttributes<HTMLDivElement>	Document
Others	InputHTMLAttributes<HTMLInputElement>	Document

Variants

import TextField from "@repo/ui/TextField";

<TextField variant="primary" />
<TextField variant="secondary" />

Has Error

import TextField from "@repo/ui/TextField";

<TextField hasError />;

Start Adornment

import TextField from "@repo/ui/TextField";
import { BadgeCheck } from "lucide-react";

<TextField startAdornment={<BadgeCheck size={18} />} />;

End Adornment

import TextField from "@repo/ui/TextField";
import { BadgeCheck } from "lucide-react";

<TextField endAdornment={<BadgeCheck size={18} />} size="xs"/>;