--- title: Input description: A labelled text field. --- > LoamUI documentation, generated from the same source as the live page — > treat it as authoritative for `@loamui/core`. # Input The single-line text box. Compose it inside a Field for its label, description and error. ## Import ```tsx import { Field, Input } from "@loamui/core"; ``` ## Usage ### Basic usage Wrap the control in Field.Root and add a Field.Label: the input reads its id from the field, so the label is wired without any props. ```tsx Email ``` ### Size from context There is no size prop. Padding and font are fluid container-relative tokens: the control adapts to the space it lives in, and always height-aligns with Button, which shares the same derived anatomy. See the Contextualism guide. ```tsx
In a narrow container
In a wide one
``` ### Description & required ```tsx Username This will be your public handle. ``` ### Error state A Field.Error before the control marks the field invalid and is announced: no error prop, the message's presence is the state. ```tsx Email Enter an email address in the correct format, like name@example.com ``` ### Native validation Native constraints such as required and type="email" are announced and styled after a submit attempt, not on blur. Existing errors clear as soon as the value becomes valid. ```tsx
Work email
``` ### With sections Sections sit inside the field but outside the accessible name, so the Field.Label still does the naming. A placeholder alone never can. ```tsx Handle Site name ``` ## When to use it - For short, free-form single-line text: names, emails, search terms, URLs. - Inside a Field.Root, which ties the label, helper description and inline error together: the control self-wires from the surrounding field, so the accessibility is correct by construction. See the Field page. ## When not to - For multi-line text: use Textarea. - For choosing from a fixed set of options: use Select, Radio or Checkbox. ## How it works ### Asking for numbers Never use type="number": scroll wheels and arrow keys silently change the value, and browsers give poor feedback when the input is invalid. Pass inputMode="numeric" for whole numbers or inputMode="decimal" for amounts (both forward straight to the native input) so touch devices raise a number pad while the field keeps normal text behaviour. ```tsx Account number Weight in kilograms ``` ### Codes and references Values users copy rather than compose (booking references, invoice numbers, licence keys) are not words, so set spellCheck={false} to stop browsers underlining a correct value as a mistake. A digits-only reference also takes inputMode="numeric". ### Autofill and input purpose Any field asking for something about the user gets the matching autoComplete value: "name", "email", "postal-code", "bday-day" and the rest of the HTML autofill set, forwarded straight through. This is WCAG 1.3.5 (Identify Input Purpose): it lets browsers fill the answer correctly and lets assistive tech present the field in the user’s own terms. ```tsx Email ``` ### Placeholders are not labels A placeholder vanishes the moment the user types, is skipped by some assistive technology, and its dimmed colour fails contrast as instruction text. Field.Label is for what the field is; format hints go in Field.Description, which stays visible and is announced. These docs use none at all: the example lives in Field.Description, where it survives typing. ### Width belongs to the container The field fills whatever it is placed in; there is no size or width prop. Width is information: a four-character reference in a page-wide box reads as a harder question than it is, so put the field in a container sized to the expected answer. ## Accessibility - Inside a Field.Root the input reads its id from the field, so Field.Label is a real