Input

Input is the single-line text field — the most-used control in any form. In garn it's not a bare <input>: it renders the shared field surface (the same appearance × size system as Select, Textarea, and Combobox), so every text control in a form lines up to the same height, radius, and focus ring at a given density. The appearance axis sets how much the field asserts itself — outline for the default bordered field, soft for a filled rest state, ghost for a borderless field that only reveals its edge on interaction.

Beyond the bare field, Input ships the affordances you'd otherwise re-build every time: leading/trailing slots for an icon or unit, a built-in clear button, a password reveal toggle, a loading spinner, and an error treatment that reddens the border and ring when aria-invalid is set. Reach past Input only when the data isn't a single line of text — a long message wants Textarea, a fixed-length code wants InputOTP, a choice wants Select or Combobox.

Always pair an Input with a Label. A placeholder is not a label — it vanishes on focus and fails screen readers. Use the label component (or Form's wiring) so clicking the text focuses the field and the accessible name is announced. Reserve the placeholder for an example of the expected value, not the field's name.

Let the field surface carry sizing — don't hand-pad. Pick a size rung and the control-height tokens handle the rest; adding px-*/h-* utilities breaks alignment with the sibling controls and the density modes. If a field looks too tall or short next to its neighbors, it's almost always a stray height utility, not the token.

Signal validity through state, not color alone. Set aria-invalid on error so the built-in red border + ring and the error-icon slot engage together, and wire the message via aria-describedby (Form does this for you). Use leading/trailing for units and adornments ($, %, a search icon) rather than baking them into the value.