# Input

A single line of text entry.

- Group: Forms
- Import: `import { Input } from '@misoto22/folio'`
- Page: https://ui.misoto22.com/components/input/
- Related: field, textarea

## Anatomy

- **Control box** (required) — The <input>, on the CONTROL_BASE it shares with Textarea and the Select trigger. Its padding is --field-px / --field-py, so a subtree marked data-density="compact" tightens the fields along with the buttons.
- **Placeholder** — placeholder, in --ink-3-aa inside the box — the same slot the value occupies, which is why it cannot also be the name.
- **Focus border** — focus:border-(--ink) on the border already there, not an added ring. The box does not gain a pixel on focus, so nothing in the row shifts.
- **Danger border** — What invalid — or an aria-invalid set by a Field with an error — swaps in. It changes the border colour and nothing else, so the reason has to come from the message below.

## Best practices

### Do

- Spell out type and inputMode. An <Input> with no type is type="text", so an email field that never says so gets a phone keyboard with no @ on it and no browser validation at all.
- Name the field to the browser with autoComplete: a password field without current-password or new-password is one a manager fills with the wrong value and one no browser offers to save.
- Reach for readOnly rather than disabled when the value is real but not editable — a disabled input is skipped by Tab AND left out of the submitted form data, so the server hears nothing about a field the reader can plainly see.

### Don’t

- readOnly is styled by nothing here: CONTROL_BASE dims on :disabled only, so a read-only input is pixel-identical to an editable one and the first thing a reader learns about it is that typing does nothing.
- type="number" is for quantities, not for digits. A phone number, a card number or a postcode loses its leading zeros, and a scroll wheel over the focused control changes the value without a keystroke.
- A Tooltip on a disabled input never opens — disabled:pointer-events-none means the control receives no hover — so the explanation for why it is disabled has to live in the Field’s hint instead.

## Accessibility

- A placeholder is not a label — it disappears the moment anyone types. Pair with Field.

## Input

A single line of text entry. Shares `CONTROL_BASE` with Textarea and Select, so the three cannot drift apart. Pair with `Field` for the label, hint and error — an input with a placeholder and no label is not labelled, because the placeholder disappears the moment anyone types.

### Props

- `invalid` — `boolean`. Paints the resting border with `--danger` and reflects `aria-invalid`.
- `ref` — `Ref<HTMLInputElement>`.

Also accepts: `InputHTMLAttributes<HTMLInputElement>`.

## Example — default

```tsx
import { Input } from '@misoto22/folio'

<div className="flex w-full max-w-md flex-col gap-3">
  <Input placeholder="Resting" aria-label="Resting" />
  <Input invalid defaultValue="not-an-email" aria-label="Invalid" />
  <Input disabled placeholder="Disabled" aria-label="Disabled" />
</div>
```

## Example — types and autofill

```tsx
import { Field, Input } from '@misoto22/folio'

<div className="flex w-full max-w-sm flex-col gap-4">
  <Field label="Email" htmlFor="signin-email">
    <Input
      id="signin-email"
      type="email"
      inputMode="email"
      autoComplete="email"
      placeholder="maya.chen@studio.example"
    />
  </Field>
  <Field label="Password" htmlFor="signin-password">
    <Input id="signin-password" type="password" autoComplete="current-password" />
  </Field>
  <Field label="Mobile" htmlFor="signin-mobile" hint="Australian numbers keep their leading zero.">
    <Input
      id="signin-mobile"
      type="tel"
      inputMode="tel"
      autoComplete="tel-national"
      placeholder="0412 345 678"
    />
  </Field>
</div>
```

## Example — read only

```tsx
import { Field, Input } from '@misoto22/folio'

<div className="flex w-full max-w-sm flex-col gap-4">
  <Field
    label="Workspace address"
    htmlFor="workspace-host"
    hint="Fixed at sign-up. Copy it, but it cannot be edited here."
  >
    <Input id="workspace-host" name="workspace" readOnly defaultValue="studio-nine.example.com" />
  </Field>
  <Field
    label="Seats"
    htmlFor="workspace-seats"
    hint="Locked while an invoice is outstanding — this one sends nothing on submit."
  >
    <Input id="workspace-seats" disabled defaultValue="24" />
  </Field>
</div>
```