# Input

> Text, search, password and URL inputs with icons, clear button and a labelled Field wrapper.

Component · Free · https://lodeui.com/components/input

## When to use

- Single-line text, email, URL, numbers with units and search fields.
- Fields that need an icon, unit, clear button or show/hide password toggle inside.

## When not to use

- Multi-line text: use a textarea.
- Choosing from known values: use a select or combobox.
- Small counts: use a number field.

## Installation

```bash
npx shadcn@latest add https://lodeui.com/r/input.json
```

npm dependencies: lucide-react

## Usage

```tsx title="example.tsx"
import { Field, Input, PasswordInput, SearchInput } from "@/components/ui/input";

export function SignUpFields({ emailError }: { emailError?: string }) {
  return (
    <div className="space-y-4">
      <Field label="Work email" htmlFor="email" error={emailError} required>
        <Input id="email" type="email" autoComplete="email" invalid={!!emailError} />
      </Field>
      <Field label="Password" htmlFor="password" description="At least 12 characters.">
        <PasswordInput id="password" autoComplete="new-password" />
      </Field>
      <SearchInput placeholder="Search projects" aria-label="Search projects" />
    </div>
  );
}
```

## API reference

### Input

A styled text input with slots inside the border. All native input attributes pass through, and the ref reaches the <input>.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| leading / trailing | `ReactNode` | – | Icon, prefix, unit or action shown inside the field. |
| size | `"sm" \| "md" \| "lg"` | `"md"` | Field height. |
| invalid | `boolean` | – | Red border and aria-invalid. |
| clearable | `boolean` | – | Shows a clear button when there's a value. Needs value and onValueChange. |
| onValueChange | `(value: string) => void` | – | Called with the new string; onChange still works too. |

### SearchInput

An Input with a search icon. Takes every Input prop except leading and type.

No props.

### PasswordInput

An Input with a show/hide toggle. The toggle uses aria-pressed.

No props.

### Field

Label, description and error wrapper that links them to the control with aria-describedby.

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| label | `string` | – | Visible label. |
| htmlFor | `string` | – | The id of the control. |
| description / error | `ReactNode` | – | Help text and an error, announced with role="alert". |
| required | `boolean` | – | Adds a required marker. |

## Keyboard interactions

| Keys | Action |
| --- | --- |
| Tab | Move into and out of the field |
| Esc | Native clear in search fields |

## Accessibility

- Always label the field: Field, a <label>, or aria-label.
- Errors are linked with aria-describedby and announced with role="alert".
- The password toggle is a labelled button with aria-pressed.

## Motion

- Border and ring colors transition on focus (150ms).

## Responsive behavior

- Fills its container width.
- Use type, inputMode and autoComplete so phones show the right keyboard.

## Performance

- Plain input; no extra renders unless clearable is used.

## Notes for AI

- Use Field for labelled form controls instead of hand-writing label markup.
- Set autoComplete on auth fields.

## Related

- [Textarea](https://lodeui.com/components/textarea) — A textarea that grows with its content, with an optional character counter.
- [Combobox](https://lodeui.com/components/combobox) — Searchable select for one or many values, fully keyboard driven.
- [Tag input](https://lodeui.com/components/tag-input) — Type, paste or pick suggestions to add tags; validates each one.
- [Number field](https://lodeui.com/components/number-field) — A stepper you can press, hold, scrub, or type into. Push past a limit and it pushes back.