# Input (/docs/input)

A styled text field with tones, a shared 34px default height, validation states, an optional leading icon, and composable adornments.

## Install

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

## Usage

```tsx
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.

```tsx
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.