# Input

> A single line where people type text, with a clear invalid state.

- **Level**: atom · **Status**: stable · **Role**: input
- **Import**: `import { Input } from "@rrios-forge/ui/atoms/input";`
- **Source**: `packages/ui/src/atoms/input`

Native `<input>` with semantic sizing and an `invalid` state. Composes with Label via `id` / `htmlFor` and is the building block the Field molecule will compose later. The `invalid` prop drives both the visible danger ring and `aria-invalid`; meaning never relies on colour alone — pair it with a visible error message via `aria-describedby`.

## Use it for

- Field with label + helper + error → `Field` + `Input`/`Textarea`/`Select`

## Axes

| Axis | Part | Values | Default | Meaning |
|---|---|---|---|---|
| `size` | — | `sm` `md` `lg` | `md` | Ergonomic scale, in three families (control, text, container). |
| `invalid` | — | `true` `false` | `false` | Fails validation: a danger edge, announced as invalid; pair it with an error message. |

## Stories

- [Playground](/?path=/story/components-atoms-input--playground) · frame: `/iframe.html?id=components-atoms-input--playground&viewMode=story`
- [Sizes](/?path=/story/components-atoms-input--sizes) · frame: `/iframe.html?id=components-atoms-input--sizes&viewMode=story`
- [States](/?path=/story/components-atoms-input--states) · frame: `/iframe.html?id=components-atoms-input--states&viewMode=story`
- [Invalid](/?path=/story/components-atoms-input--invalid) · frame: `/iframe.html?id=components-atoms-input--invalid&viewMode=story`
- [With label](/?path=/story/components-atoms-input--with-label) · frame: `/iframe.html?id=components-atoms-input--with-label&viewMode=story`
- [Disabled and read-only](/?path=/story/components-atoms-input--disabled-and-readonly) · frame: `/iframe.html?id=components-atoms-input--disabled-and-readonly&viewMode=story`

## Decisions that name it

- ADR-002 — Component variants live in `variants.ts` and export their option metadata

## Always

- Tokens only (R04); variants are semantic axes, never appearance (R02).
- Typography and actions are Poesía atoms, never raw HTML with utilities.
- Vibrant panes need a ground and never nest (ADR-027).