Input — native text fields for agent forms (HTML/CSS)

Specimen

One framed specimen with Preview, Code, and Install. Copy the active panel.

Preview

Project nameUse a short name the agent can reference.

Invalid stateEnter a project name before continuing.

The error uses color and text. The input never invents validation rules.

Code

input.html

<style>
.au-input {
  --au-input-bg: var(--au-surface);
  --au-input-fg: var(--au-fg);
  --au-input-border: var(--au-border-emphasis);
  --au-input-radius: var(--au-radius-md);
  --au-input-height: 42px;

  appearance: none;
  background: var(--au-input-bg);
  border: 1px solid var(--au-input-border);
  border-radius: var(--au-input-radius);
  color: var(--au-input-fg);
  font: 400 15px/1.4 var(--au-font-sans);
  min-height: var(--au-input-height);
  padding: 0 12px;
  transition: background-color var(--au-duration-fast) var(--au-ease), border-color var(--au-duration-fast) var(--au-ease), box-shadow var(--au-duration-fast) var(--au-ease);
  width: 100%;
}

.au-input::placeholder { color: var(--au-fg-subtle); }
.au-input:hover:not(:disabled) { border-color: var(--au-fg-subtle); }
.au-input:focus { border-color: var(--au-action); box-shadow: var(--au-focus-ring); outline: none; }
.au-input:disabled { cursor: not-allowed; opacity: 0.55; }
.au-input[aria-invalid="true"],
.au-input--error { border-color: var(--au-danger); }
.au-input[aria-invalid="true"]:focus,
.au-input--error:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--au-danger) 22%, transparent); }
.au-input--sm { --au-input-height: 34px; font-size: 13px; }
.au-input--lg { --au-input-height: 48px; font-size: 16px; }

.au-input-field { display: grid; gap: 8px; }
.au-input-field__label { color: var(--au-fg); font-size: 13px; font-weight: 600; }
.au-input-field__hint { color: var(--au-fg-subtle); font-size: 12px; line-height: 1.4; }
.au-input-field__error { color: var(--au-danger); font-size: 12px; line-height: 1.4; }

@media (prefers-reduced-motion: reduce) {
  .au-input { transition-duration: 0.01ms; }
}
</style>

<div class="au-input-field">
  <label class="au-input-field__label" for="project-name">Project name</label>
  <input class="au-input" id="project-name" name="project-name" type="text" placeholder="release-notes">
  <span class="au-input-field__hint">Use a short name the agent can reference.</span>
</div>

Install

head.html

<link rel="stylesheet" href="tokens.css">
<link rel="stylesheet" href="components/input/input.css">

Component contract

States: Neutral, focus, disabled, and aria-invalid="true" error.
Events: Native input, change, and form events.
No JavaScript: Native text entry and form submission.
CSS variables: --au-input-bg, --au-input-border, --au-input-radius, --au-input-height.