Forms

2.0.2

Comprehensive suite of accessible, mobile-friendly, and beautiful form controls including floating labels and custom inputs.

Installation

Full Bundle (via UNPKG)

<link rel="stylesheet" href="https://unpkg.com/axis-twelve@2.0.2/dist/axis-twelve.min.css">

Module Only (via UNPKG)

<link rel="stylesheet" href="https://unpkg.com/axis-twelve@2.0.2/dist/modules/axis-forms.min.css">

Class Reference

.ax-inputBase

Base class for <input> elements.

.ax-selectBase

Base class for <select> elements.

.ax-textareaBase

Base class for <textarea> elements.

.ax-labelElement

Styled label for form controls.

.ax-form-groupLayout

Container for a label and input pair.

.ax-input-groupLayout

Container for floating labels.

.ax-input--validState

Green border for valid state.

.ax-input--invalidState

Red border for invalid state.

.ax-checkboxComponent

Custom checkbox container.

.ax-radioComponent

Custom radio container.

Live Examples

Complete Login Form

A full login form showcasing floating labels, validation states, and layout spacing.

Preview: Complete Login Form

Source Code

html

<form class="ax-space-y-6" style="max-width: 400px; width: 100%;" onsubmit="return false;">
  <div class="ax-input-group">
    <input type="email" class="ax-input" placeholder=" " id="email">
    <label class="ax-label" for="email">Email Address</label>
  </div>
  <div class="ax-input-group">
    <input type="password" class="ax-input" placeholder=" " id="pw">
    <label class="ax-label" for="pw">Password</label>
  </div>
  <div class="ax-flex ax-items-center ax-gap-2">
    <input type="checkbox" id="rem" class="ax-checkbox">
    <label for="rem" class="ax-text-sm">Remember me</label>
  </div>
  <button type="submit" class="ax-btn ax-btn--primary ax-w-full">Sign In</button>
</form>

Validation States

Demonstration of valid and invalid input states.

Preview: Validation States

Username

Error Field

Please provide a valid entry.

Source Code

html

<div class="ax-space-y-4" style="max-width: 400px;">
  <div class="ax-input-group">
    <input type="text" class="ax-input ax-input--valid" value="Correct value" id="v-1">
    <label class="ax-label" for="v-1">Username</label>
  </div>
  <div class="ax-input-group">
    <input type="text" class="ax-input ax-input--invalid" value="Oops!" id="v-2">
    <label class="ax-label" for="v-2">Error Field</label>
    <p class="ax-text-xs ax-text-red-500 ax-mt-1">Please provide a valid entry.</p>
  </div>
</div>

Customization

Variable	Default	Description
`--ax-border-color`	#d1d5db	Default border color
`--ax-bg-surface`	#f9fafb	Disabled state background

♿ Accessibility Guidelines

•Always use for/id matching for labels
•Use aria-describedby for helper/error text
•High-contrast focus rings for keyboard users

Module Evolution

Version	Type	Description
v2.0.1	Internal	Refactored input spacing and alignment to use logical properties.

← Previous

Buttons

Cards