ui-shrushank
componenttext-fieldsource: ok · hit
Text Field
A labeled text input with clear focus and placeholder states.
npx shadcn add "https://raw.githubusercontent.com/Shrootiiii/ui/main/r/text-field.json"free
Where it goes
stats
Interaction
animated-counter
Tags auto-generated by rules on 9/24/2026 — empty means no evidence, not lack of support.
Files1 · source cached 10/14/2026, 11:26:58 AM
components/ui/TextField.tsx
export function TextField({ label }: { label: string }) {
return (
<div className="relative w-full">
<input
id="text-field"
type="text"
placeholder=" "
className="peer w-full rounded-md border border-stone-300 bg-stone-100 px-3 pb-2 pt-5 text-sm text-stone-900 outline-none transition-[border-color,box-shadow] duration-150 focus:border-emerald-600 focus:ring-2 focus:ring-emerald-600/25 dark:border-stone-700 dark:bg-stone-950 dark:text-stone-100 dark:focus:border-emerald-400 dark:focus:ring-emerald-400/25"
/>
<label
htmlFor="text-field"
className="pointer-events-none absolute left-3 top-1/2 -translate-y-1/2 text-sm text-stone-500 transition-[top,font-size,color] duration-150 ease-out peer-focus:top-3.5 peer-focus:text-[11px] peer-focus:text-emerald-700 peer-[:not(:placeholder-shown)]:top-3.5 peer-[:not(:placeholder-shown)]:text-[11px] dark:peer-focus:text-emerald-400"
>
{label}
</label>
</div>
);
}