# Input

A single-line text field. Two sizes, three fills, prefix and suffix, and every state: hover, focus, filled, read-only, disabled and error.

<Preview name="input-states" title="Input states" />

## Installation

<ComponentInstall name="input" />

Installs [Field](/en/docs/components/field) too.

## Usage

```tsx title="page.tsx"
import { Field, FieldDescription, FieldLabel } from "@/components/ui/field";
import { Input } from "@/components/ui/input";

export function NameField() {
  return (
    <Field name="name">
      <FieldLabel required>Full name</FieldLabel>
      <Input required autoComplete="name" />
      <FieldDescription>As it appears on your ID card.</FieldDescription>
    </Field>
  );
}
```

Use Input for short single-line answers: names, IDs, email addresses, phone numbers. Set `type` and `inputMode` for the right keyboard, and `autoComplete` so browsers can fill it in. For numbers you add and subtract use [Number Input](/en/docs/components/number-input); for several lines use [Textarea](/en/docs/components/textarea).

## Anatomy

- **Box** (`<div>`): the border, fill, shadow and the underline.
- **Start adornment** (optional): an icon or a short prefix such as `+966`.
- **Input** (`<input>`): the text.
- **End adornment** (optional): an icon, suffix or button.

## Examples

### Sizes

`lg` is 40px high (default) and `md` is 32px.

<Preview compact name="input-sizes" title="Sizes" />

### Fills

`appearance` is `default`, `lighter` or `darker`. As in DGA, lighter and darker have no border at rest; it appears on hover, focus and press. The states below show them all.

<Preview name="input-states" title="Fills" />

### Prefix and suffix

`startAdornment` and `endAdornment` take an icon or text. They sit on the logical start and end sides. Phone numbers and emails stay left to right with `dir="ltr"`.

<Preview compact name="input-adornments" title="Prefix and suffix" />

## RTL

The text, placeholder and adornments start on the right. Typed Arabic aligns right; typed Latin text (an email) aligns with `dir="ltr"` when you set it.

<DirectionCompare name="input-adornments" title="Input" />

## Accessibility

| Key | Action |
| --- | --- |
| <kbd>Tab</kbd> | Moves focus to the field. |
| <kbd>Shift</kbd> + <kbd>Tab</kbd> | Moves focus back. |

- A native `<input>`: always label it with a [Field](/en/docs/components/field); a placeholder is not a label.
- There is no outline. Hover darkens the border. Pressed (mouse or touch down) shows the pressed fill and the 2px underline at half width, growing from the centre. Focus (mouse or keyboard) shows the pressed border colour, the full-width underline and `shadow-md` (no shadow in dark mode). The underline grows from the centre to both sides in LTR and RTL alike, and is at least 3:1 on every fill.
- The default border is 3:1 or better against the page, light and dark (WCAG 1.4.11). See Deviations for the two states that are not.
- Errors set `aria-invalid` and show an icon with the message. Read-only fields stay focusable; disabled ones do not.
- Adornment icons are decorative (`aria-hidden`). A suffix button needs its own `aria-label`.

## API Reference

<ApiReference component="input" />

## Deviations from DGA

- The default border is neutral-500, not neutral-400 (2.6:1 on white), so the field can be found at rest.
- The placeholder is neutral-500 as in DGA; only on the pressed and darker fills (4.34:1) does it use neutral-600.
- The error border is error-600 (the live DGA CSS), not the Figma error-700.
- A focused read-only field shows the underline, because it is still in the tab order.
- Known gaps, kept as DGA draws them: the read-only border (1.5:1) and the lighter and darker fills at rest (1.0 to 1.1:1).

<ComponentDeviations component="input" />

## Contrast

<ComponentContrast component="input" />


---

[Index of every page](https://dga.omqkhafi.dev/en/llms.txt)