Input

npx shadcn@latest add https://4af.selfsimilar.dev/r/input.json

import { Input } from "@/components/ui/input";

<Input placeholder="Search…" />

API⠋

Main export: Input

A Base UI input with default, plain, and underline structures; neutral or accent focus; invalid and disabled states; an optional leading icon; and custom number steppers.

Leading icon⠋

startIcon takes any node and pins it to the leading edge of the field, inside the border. Text inputs without an icon render without a wrapper; icons and number steppers add one.

import { Search } from "lucide-react";

<Input startIcon={<Search />} placeholder="Search…" />

The icon is decorative (aria-hidden, pointer-events-none, 16px), so it is never announced and clicks pass through to the field. Give the input its own label. The field carries data-icon-start and takes the matching leading padding, and the icon dims with the input when it is disabled.

On default and plain the glyph sits at the field's own 12px inset. underline drops its horizontal padding, so the icon goes flush with the text it leads. A leading icon composes with a number field: the icon takes the leading edge and the steppers keep the trailing one.

Sizing⠋

The default field is 34px high with the medium control's 8px radius, matching the medium Button and Select controls. The underline variant remains square. Use className when a field needs a deliberately different height.

The optional number-stepper buttons use the compact 6px radius inside the field.