SuperForm

Advanced form controls with real-time validation, conditional logic, and HTMX submission. Define validation rules, error messages, and field dependencies entirely via data-* attributes.

Real-time Validation Floating Labels Conditional Fields HTMX Submit

View Full Documentation

What Makes It Super

Declarative Validation

Define validation rules via data attributes. Required, email, pattern, min/max, custom regex—no JavaScript required.

<input 
  data-az-validate="required|email"
  data-az-error-required="Email is required"
  data-az-error-email="Invalid email format"
  data-az-validate-on="blur">

Floating Labels

Material-style floating labels that animate on focus. Works with all input types including selects and textareas.

<div data-az-field="floating">
  <input data-az-input id="name">
  <label data-az-label for="name">
    Full Name
  </label>
</div>

Conditional Logic

Show/hide fields based on other field values. Complex conditional chains with AND/OR logic.

<div data-az-show-if="role=admin">
  <input name="admin_code">
</div>

<div data-az-show-if="country=US|CA">
  <input name="zip_code">
</div>

Async Submission

HTMX-powered form submission with loading states, success callbacks, and error handling.

<form data-az-component="super-form"
      data-az-submit="htmx"
      hx-post="/api/users"
      hx-swap="outerHTML"
      data-az-loading="spinner">

Inline Error Display

Smart error positioning with automatic scroll-to-error. Field-level and form-level error summaries.

<form data-az-error-display="inline"
      data-az-error-summary="top"
      data-az-scroll-to-error="true">

Field Arrays

Dynamic repeatable field groups. Add, remove, and reorder items with automatic name indexing.

<div data-az-field-array="addresses"
     data-az-array-min="1"
     data-az-array-max="5">
  <template data-az-array-template>
    ...
  </template>
</div>

Complete Example

A registration form with validation, floating labels, and HTMX submission.

<form 
  data-az-component="super-form"
  data-az-validate="realtime"
  data-az-submit="htmx"
  data-az-loading="button"
  data-az-error-display="inline"
  hx-post="/api/register"
  hx-target="#result">
  
  <div data-az-field="floating">
    <input 
      type="email" 
      name="email"
      data-az-validate="required|email"
      data-az-error-required="Email is required">
    <label>Email Address</label>
  </div>
  
  <div data-az-field="floating">
    <input 
      type="password" 
      name="password"
      data-az-validate="required|min:8|pattern:(?=.*[A-Z])(?=.*[0-9])"
      data-az-error-pattern="Must contain uppercase and number">
    <label>Password</label>
  </div>
  
  <button type="submit" data-az-submit-button>
    <span data-az-loading-text="Creating account...">Register</span>
  </button>
  
</form>

Ready for Better Forms?

SuperForm is part of AZ UI Kit. Request a briefing to learn more about our enterprise licensing.

ブリーフィングを依頼 Back to AZ UI Kit