Skip to content

Text input

Stable Available in release assets

Present a native single-line text control while preserving browser-owned typing, validation, autofill, submission, and password-manager behavior.

Text input primary example

Show code
<div class="thin-field">
  <label for="email">Email address</label>
  <input class="thin-input" id="email" type="email" name="email" autocomplete="email" aria-describedby="email-hint" required />
  <small class="thin-hint" id="email-hint">Used only for order updates.</small>
</div>

Each authored example uses the production assets and includes copyable markup.

Default text input

A labelled email input with persistent hint text connected through aria-describedby.

Show code
<div class="thin-field">
  <label for="name">Full name</label>
  <input class="thin-input" id="name" type="text" name="name" autocomplete="name" />
</div>

Required and invalid

Native constraint validation and user-invalid presentation remain browser owned.

Show code
<div class="thin-field">
  <label for="email-req">Email</label>
  <input class="thin-input" id="email-req" type="email" name="email" required />
</div>

Read-only and disabled

Read-only preserves the submitted value; disabled prevents editing and activation.

Show code
<div class="thin-stack">
  <div class="thin-field">
    <label for="order-id">Order ID</label>
    <input class="thin-input" id="order-id" type="text" name="order-id" value="1042" readonly />
  </div>
  <div class="thin-field">
    <label for="promo">Promo code</label>
    <input class="thin-input" id="promo" type="text" name="promo" disabled />
  </div>
</div>

Input types

Password, search, and tel types keep native keyboard and validation behavior.

Show code
<div class="thin-stack">
  <div class="thin-field">
    <label for="password">Password</label>
    <input class="thin-input" id="password" type="password" name="password" autocomplete="current-password" />
  </div>
  <div class="thin-field">
    <label for="search">Search</label>
    <input class="thin-input" id="search" type="search" name="q" />
  </div>
  <div class="thin-field">
    <label for="phone">Phone</label>
    <input class="thin-input" id="phone" type="tel" name="phone" autocomplete="tel" inputmode="tel" />
  </div>
</div>

Anatomy

  • Native input.thin-input with authored name and type
  • Optional persistent hint
  • Optional server or validation error

Variants and sizes

  • Default — shown above
  • Required — shown above
  • Read-only — shown above
  • Disabled — shown above
  • Password — shown above
  • Search — shown above
  • Tel — shown above

Rendered fixtures exercise authored content and constrained layouts with the same production assets.

  • Empty
  • Populated
  • Focused
  • Invalid
  • Disabled
  • Read-only
  • Long unbroken content
  • Long localized label and hint
  • Narrow container
  • 200% and 400% zoom

Structured state fixtures are not published for this item yet.

Interaction and keyboard behavior

Typing, selection, clipboard commands, undo, native constraint validation, form reset, value submission, and autofill remain browser owned.

Accessibility

Use an explicit label, retain visible focus, and connect persistent hints and errors with aria-describedby. Do not replace the input with contenteditable or use placeholder text as its accessible name.

Contract
NATIVE
Basis
Native <input>, <select>, and <textarea>; no APG widget
Evidence
  • tests/unit/library/form-controls-stable.test.ts

API

Use input.thin-input with an authored name and type. Native required, minlength, maxlength, pattern, readonly, disabled, autocomplete, inputmode, and aria-describedby attributes remain the state and submission API.

Behavior tier: native

Custom properties

PropertyDefaultDescription
--thin-input-radiusvar(--thin-radius-m)Corner radius of the input.
--thin-input-alignstartInline alignment of the input text.

Fallback

The native input remains editable, validated, and submitted without CSS or JavaScript.

Assets and dependencies

  • /components.css

Dependencies: None

Source: packages/ui/src/items/text-input/style.ts

Stability evidence

  • Native value, validation, autofill, and no-JavaScript contract: test:tests/unit/library/form-inputs.test.ts
  • Complete item-specific API, fallback, and difficult-state documentation: test:tests/unit/library/form-controls-stable.test.ts
  • Cross-theme, density, localized, narrow-container, zoom, and forced-colors fixture: review:site/src/pages/quality/index.astro#quality-review

Composition

Derived from the examples and style specs, not authored.

Composes

Used by