Buttons & inputs

Text Field

Free

A labeled text input with clear focus and placeholder states.

npx shadcn@latest add @ui-shrushank/text-field

The install writes a single file to components/ui/TextField.tsx, which exports TextField.

tsx
import { TextField } from "@/components/ui/TextField";
tsx
<TextField label="Label" />

The labelled input baseline.

Always a real <label>, distinct focus and placeholder states, custom focus ring with the browser outline suppressed.

Placeholder text is not a label substitute (it vanishes on type); pairing them removes the "what was this field?" problem once the user starts typing.

Every line below was read out of the file you are about to copy, so you can check each one against the source at the bottom of this page.

  • Pairs every input with a real <label>, so the field keeps its name after the placeholder disappears.

1 required, 0 optional.

labelrequired
string

One file, no runtime package. Copy it, or install it with the command at the top of this page.

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