Input

Examples

Default

Validation

Affixes & icons

prefix / suffix are outer affix segments. iconStart / iconEnd sit inside the field and follow reading direction in RTL.

Sizes

TanStack Form

Submit with an empty or invalid email to see field validation. A valid email clears the error and shows a success message.

RTL

Wrap the field (or a parent) in dir="rtl" / lang="fa". Outer prefix / suffix and iconStart / iconEnd follow the reading direction.

API Reference

Accessibility

WCAG success criteria

Why it matters

Text inputs are the primary way users enter personal, financial, and operational data. If a field lacks a visible label, error association, or keyboard focus indicator, people who use screen readers, keyboards, or magnifiers cannot complete tasks — and everyone suffers when validation feedback is unclear. EDS keeps the native <input> as the focus target so form libraries, browser autofill, and assistive tech work without adapters.

Getting labeling or error wiring wrong is a compliance and product risk: users abandon forms, support tickets spike, and WCAG audits fail on basic field patterns.

Keyboard

The native <input> receives focus and handles all standard text-field keys. Chrome wrappers (prefix, icons, focus ring) are not in the tab order.

Screen readers & semantics

forwardRef targets the <input> so programmatic focus (ref.current.focus()) and scroll-into-view from form libraries work as expected.

Focus & visuals

The success checkmark is visual confirmation only — do not rely on it as the sole indicator of validity for screen-reader users; pair with text or programmatic state.

Build with it

Validated field pattern:

const errorId = "email-error";

<>
  <label htmlFor="email">Email</label>
  <Input
    id="email"
    name="email"
    validation={invalid ? "error" : "none"}
    aria-invalid={invalid}
    aria-describedby={invalid ? errorId : undefined}
  />
  {invalid ? (
    <p id={errorId} role="alert">
      Enter a valid email address
    </p>
  ) : null}
</>;

See Usage → TanStack Form for a complete useForm binding example.

Quick test

1. Keyboard-only — Tab to the input, type text, Shift+Tab away. Confirm a visible focus ring appears and the caret is in the field.
2. Label — With VoiceOver/NVDA, focus the field. Confirm the accessible name matches the visible label (not just placeholder).
3. Error state — Set validation="error" with linked error text via aria-describedby. Confirm AT reads the field as invalid and announces the error.
4. Disabled / read-only — Tab to each. Disabled should be skipped; read-only should focus but not accept edits.
5. Icons & affixes — Add iconStart and prefix. Confirm AT does not double-announce icon/affix content.
6. RTL — Wrap in dir="rtl" lang="fa". Confirm affixes and icons flip to inline-start/end correctly.
7. Zoom — At 200% browser zoom, confirm the field, label, and error text remain visible without horizontal clipping.