AIR Stack

Appearance

Text Field ​

Text fields allow users to enter text into a UI. They typically appear in forms and dialogs. The library provides pure CSS floating labels, smart icon padding, and multiple variants (outlined and filled) for inputs, textareas, and selects.

Theme Variables ​

You can customize the dimensions of text fields by overriding these CSS variables.

css
:root {
  --air-text-field-height: calc(var(--spacing) * 14); /* 56px default */
  --air-text-field-radius: var(--radius-md);
  --air-text-field-padding-x: calc(var(--spacing) * 4);
  --air-text-field-icon-padding-x: calc(var(--spacing) * 12);
  --air-text-field-font-size: var(--font-body-large-size);
}

Composed Utilities ​

The text field relies on a specific HTML structure wrapped in a text-field container. This container manages the smart padding and the pure CSS floating label animations via :has() selectors.

Outlined Text Field ​

html
<div class="text-field">
  <label class="text-field-label">Email Address</label>
  <input type="email" class="text-field-input" placeholder="name@example.com" />
</div>

Filled Text Field ​

html
<div class="text-field">
  <label class="text-field-label">Username</label>
  <input type="text" class="text-field-input-filled" placeholder="Enter username" />
</div>

With Icons ​

If you place a material-symbols-outlined or .icon-button before or after the input, the wrapper automatically adjusts the padding-inline-start or padding-inline-end to prevent the text from overlapping the icons.

html
<div class="text-field relative">
  <label class="text-field-label">Password</label>
  <!-- Leading icon -->
  <span class="material-symbols-outlined absolute top-1/2 left-4 -translate-y-1/2">lock</span>
  
  <input type="password" class="text-field-input" placeholder="Password" />
</div>

Input Variants ​

  • text-field-input: The default "Outlined" variant. It applies a transparent background with an outline colored border.
  • text-field-input-filled: The "Filled" variant. It applies a surface-container-highest background, a bottom border, and specific padding to accommodate the floating label inside the filled area.
  • textarea-input / textarea-input-filled: Applied to <textarea> elements. They inherit the standard input styles but apply height: auto, set minimum heights, and enforce resize: vertical.
  • select-input / select-input-filled: Applied to <select> elements. The wrapper automatically generates a custom trailing caret icon when it detects these classes.

Supporting Text ​

You can add supporting text or error messages directly below the text field wrapper.

html
<div class="text-field">
  <input type="text" class="text-field-input" />
</div>
<div class="text-field-supporting-text">Helper text goes here.</div>
<!-- Or for errors: -->
<!-- <div class="text-field-error">Invalid input.</div> -->

Sizes ​

Apply a size class to the outer text-field wrapper to scale the entire component and its descendants automatically.

  • text-field-sm: 40px height.
  • text-field-md: 56px height (Default).
  • text-field-lg: 64px height.