Input

Input captures one native single-line value. It preserves browser editing, selection, validation, autofill, password-manager, input-method, and form behavior while A3S UI supplies a consistent visual contract.

Notification email

Used for release notices and account recovery.

Current value: Not set

InstallTerminal

npm install @a3s-lab/ui@0.4.1

<div class="field">
<label for="input-notification-email-en">Notification email</label>
<input id="input-notification-email-en" class="input" type="email" name="notificationEmail" autocomplete="email" inputmode="email" enterkeyhint="next" aria-describedby="input-notification-email-help-en" placeholder="name@example.com">
<p id="input-notification-email-help-en">Used for release notices and account recovery.</p>
<output data-input-current-value aria-live="polite">Current value: Not set</output>
</div>
<script type="module">
const input = document.querySelector("#input-notification-email-en");
const output = document.querySelector("[data-input-current-value]");
input.addEventListener("input", event => {
output.textContent = "Current value: " + (event.currentTarget.value || "Not set");
});
input.addEventListener("change", event => {
persistDraft(event.currentTarget.value);
});
</script>

import "@a3s-lab/ui/a3s.css";
import "@a3s-lab/ui/all";

Usage

Import Tailwind and one complete A3S UI style bundle:

@import "tailwindcss";
@import "@a3s-lab/ui/a3s.css";

For component-level loading, import the base styles, Input structure, Field structure, and one visual style in that order:

@import "@a3s-lab/ui/base.css";
@import "@a3s-lab/ui/components/input.css";
@import "@a3s-lab/ui/components/field.css";
@import "@a3s-lab/ui/styles/a3s.css";

Use class="input" on a supported native <input>. In production forms, compose it with Field so a visible label and supporting copy remain available before, during, and after editing.

<div class="field">
  <label for="notification-email">Notification email</label>
  <input
    id="notification-email"
    class="input"
    type="email"
    name="notificationEmail"
    autocomplete="email"
    aria-describedby="notification-email-help"
  />
  <p id="notification-email-help">
    Used for release notices and account recovery.
  </p>
</div>

Use Input for one native single-line value. Use Input Group for prefixes, suffixes, icons, units, or inline actions; File Upload for file queues and progress; and Task Composer for rich instructions, mentions, attachments, and queued submission.

Parameters

Parameter	Purpose
`id`	Connects the native input to one persistent visible label
`name`	Supplies the submitted field key; disabled inputs are excluded from `FormData`
`type`	Selects native editing, validation, keyboard, autofill, and browser affordances
`autocomplete`	Lets browsers and password managers identify the real value purpose
`inputmode`	Refines the virtual keyboard when `type` alone does not express it
`enterkeyhint`	Labels the virtual keyboard action without changing native Enter behavior
`aria-describedby`	Associates ordinary guidance and, after validation, the current error
`required`, `min`, `max`, `step`, `minlength`, `maxlength`, `pattern`	Express native constraints only when they match the actual data contract
`aria-invalid="true"`	Exposes an authored failed-validation state after validation has run
`disabled`	Prevents focus, editing, validation, and form submission; pair it with a reason
`readonly`	Preserves focus, selection, copying, and form submission while preventing edits

States and variants

Empty and ready are ordinary value states. Invalid begins only after validation has run. Disabled and read-only are different native availability contracts and must not be presented as interchangeable styling variants.

Type semantics

Choose a type from the data, keyboard, validation, and autofill behavior the user needs. Preserve the browser's own affordances instead of recreating them with decoration.

Account handle

Identifiers remain text when leading zeros or exact characters matter.

Work email

The browser supplies email validation and an email-oriented keyboard.

Telephone

Regional formatting and validation remain application concerns.

Runbook URL

State whether a scheme is required before validation runs.

Current password

Do not block paste, autofill, or password managers.

Review date

Use the native picker only when a local date is the complete value.

<div class="grid w-full gap-4 sm:grid-cols-2">
    <div class="field">
      <label for="input-handle-en">Account handle</label>
      <input
        id="input-handle-en"
        class="input"
        type="text"
        name="handle"
        autocomplete="username"
        placeholder="alex-chen"
      />
      <p>
        Identifiers remain text when leading zeros or exact characters matter.
      </p>
    </div>
    <div class="field">
      <label for="input-work-email-en">Work email</label>
      <input
        id="input-work-email-en"
        class="input"
        type="email"
        name="workEmail"
        autocomplete="section-work email"
        inputmode="email"
        placeholder="alex@example.com"
      />
      <p>
        The browser supplies email validation and an email-oriented keyboard.
      </p>
    </div>
    <div class="field">
      <label for="input-phone-en">Telephone</label>
      <input
        id="input-phone-en"
        class="input"
        type="tel"
        name="telephone"
        autocomplete="tel"
        placeholder="+86 138 0000 0000"
      />
      <p>Regional formatting and validation remain application concerns.</p>
    </div>
    <div class="field">
      <label for="input-url-en">Runbook URL</label>
      <input
        id="input-url-en"
        class="input"
        type="url"
        name="runbookUrl"
        inputmode="url"
        placeholder="https://example.com/runbook"
      />
      <p>State whether a scheme is required before validation runs.</p>
    </div>
    <div class="field">
      <label for="input-password-en">Current password</label>
      <input
        id="input-password-en"
        class="input"
        type="password"
        name="currentPassword"
        autocomplete="current-password"
      />
      <p>Do not block paste, autofill, or password managers.</p>
    </div>
    <div class="field">
      <label for="input-date-en">Review date</label>
      <input id="input-date-en" class="input" type="date" name="reviewDate" />
      <p>Use the native picker only when a local date is the complete value.</p>
    </div>
  </div>

Use type="number" only when native stepping and numeric constraints match the job. Account numbers, postal codes, identifiers, leading-zero values, and high-precision decimals remain text. Native type="file" is a compatibility boundary; production drag, queue, progress, failure, and retry flows belong to File Upload.

Form validation and recovery

Keep a required field neutral before the first validation attempt. On failure, retain the attempted value, name the problem, focus the field, and add the error to its description relationship. Clear stale error semantics as soon as the value becomes valid or the form resets.

<form
    class="grid w-full gap-4"
    data-input-validation-demo="en"
    novalidate
    onsubmit="event.preventDefault(); const input = this.querySelector('#input-validation-email-en'); const field = input.closest('.field'); const error = this.querySelector('#input-validation-email-error-en'); if (input.checkValidity()) return; field.dataset.invalid = 'true'; input.setAttribute('aria-invalid', 'true'); input.setAttribute('aria-describedby', 'input-validation-email-hint-en input-validation-email-error-en'); error.hidden = false; input.focus()"
    onreset="const input = this.querySelector('#input-validation-email-en'); const field = input.closest('.field'); const error = this.querySelector('#input-validation-email-error-en'); field.removeAttribute('data-invalid'); input.removeAttribute('aria-invalid'); input.setAttribute('aria-describedby', 'input-validation-email-hint-en'); error.hidden = true"
  >
    <div class="field">
      <label for="input-validation-email-en">Workspace owner email</label>
      <input
        id="input-validation-email-en"
        class="input"
        type="email"
        name="workspaceOwnerEmail"
        autocomplete="email"
        inputmode="email"
        aria-describedby="input-validation-email-hint-en"
        required
        oninput="if (event.isComposing || !this.checkValidity()) return; const field = this.closest('.field'); field.removeAttribute('data-invalid'); this.removeAttribute('aria-invalid'); this.setAttribute('aria-describedby', 'input-validation-email-hint-en'); field.querySelector('[role=alert]').hidden = true"
      />
      <p id="input-validation-email-hint-en">
        Use an address that can receive workspace recovery messages.
      </p>
      <p id="input-validation-email-error-en" role="alert" hidden>
        Enter a complete email address, such as owner@example.com.
      </p>
    </div>
    <div class="flex flex-wrap gap-2">
      <button class="btn" type="submit">
        Save address
      </button>
      <button class="btn" type="reset" data-variant="outline">
        Reset
      </button>
    </div>
  </form>

Client validation improves recovery but never replaces server validation, sanitization, authorization, or stale-response handling.

Disabled and read-only

Disabled removes the value from focus, editing, constraint validation, and form submission. Read-only keeps the value focusable, selectable, copyable, and submitted. Both need a visible reason.

<form class="grid w-full gap-5" data-input-availability="en">
    <div class="field" data-disabled="true">
      <label for="input-disabled-en">Policy-managed address</label>
      <input
        id="input-disabled-en"
        class="input"
        type="email"
        name="policyManagedAddress"
        value="policy-managed@example.com"
        aria-describedby="input-disabled-reason-en"
        disabled
      />
      <p id="input-disabled-reason-en">
        Workspace policy manages this archived notification address.
      </p>
    </div>
    <div class="field" data-readonly="true">
      <label for="input-readonly-en">Release owner</label>
      <input
        id="input-readonly-en"
        class="input"
        type="email"
        name="releaseOwner"
        value="release-owner@example.com"
        aria-describedby="input-readonly-reason-en"
        readOnly
      />
      <p id="input-readonly-reason-en">
        Only organization owners can edit this value; it remains selectable and
        is included in form submission.
      </p>
    </div>
  </form>

Accessibility

Keep one persistent visible label. Placeholder text may demonstrate format but never supplies the only name.
Associate ordinary guidance through aria-describedby. Add the current error ID only after validation and remove it after recovery.
Let native keyboard editing, selection, undo, paste, autofill, password managers, and search/date controls operate unchanged.
Do not transform, validate business rules, or submit while an IME composition is active; wait for compositionend.
Keep email, telephone, and URL values left-to-right inside RTL layouts so punctuation and prefixes retain their authored order; labels and supporting copy still follow the layout direction.
Use one continuous focus boundary. Forced-colors mode replaces the inset visual boundary with a system Highlight outline.
On coarse pointers, text-like inputs remain at least 44px high and 16px to avoid mobile focus zoom.
Test at 200% browser zoom, with long values, RTL text, CJK input, real mobile keyboards, autofill, password managers, and assistive technology before release.

#Input

#Usage

#Parameters

#States and variants

#Type semantics

#Form validation and recovery

#Disabled and read-only

#Accessibility