Input

Text inputs for single-line text entry. Supports all standard HTML input types.

Input types

<input type="text" class="af-input" placeholder="Text input" />
<input type="email" class="af-input" placeholder="Email input" />
<input type="password" class="af-input" placeholder="Password input" />
<input type="search" class="af-input" placeholder="Search" />
<input type="tel" class="af-input" placeholder="Phone number" />
<input type="url" class="af-input" placeholder="Website URL" />
<input type="number" class="af-input" placeholder="Number" />
<input type="date" class="af-input" />
<input type="time" class="af-input" />

States

<input type="text" class="af-input" placeholder="Normal" />
<input type="text" class="af-input af-is-error" placeholder="Error state" aria-invalid="true" />
<input type="text" class="af-input" disabled placeholder="Disabled" />

Autosize input (experimental)

Use af-is-autosize to let single-line inputs grow with content:

<input type="text" class="af-input af-is-autosize" placeholder="Type to grow" />

Info: Inputs growing horizontally as you type can cause layout shifts (bad in modern UI/UX). Use autosize only for narrow, controlled cases (like tag inputs or inline search).

Component tokens

Form controls use shared control tokens plus input-specific tokens (applies to inputs, selects, and textareas):

• --af-control-min-height, --af-control-radius
• --af-input-min-height, --af-input-font-size, --af-input-leading
• --af-input-placeholder-color, --af-input-padding-x, --af-input-padding-y

<style>
  :root { --af-control-min-height: 3rem; --af-input-placeholder-color: rgba(0, 0, 0, 0.45); }
</style>
<input class="af-input" placeholder="Custom input" />

Error handling

Required for accessibility: When showing errors, you must:

1. Set aria-invalid="true" on the input
2. Link the error message via aria-describedby (input references error message id)

<div class="af-field">
  <label class="af-field__label" for="email">
    Email
  </label>
  <input
  type="email"
  id="email"
  class="af-input af-is-error"
  aria-invalid="true"
  aria-describedby="email-error"
  placeholder="Invalid email"
/>
  <div class="af-field__error" id="email-error">
    Please enter a valid email address
  </div>
</div>

Live example