Advanced Forms

Build complex, accessible forms with Axiom01's semantic form components.

Form Philosophy

Axiom01 forms follow the same semantic-first approach as all our components. Instead of utility classes on every input, we style forms using logical semantic structure and descendant selectors.

Key Principles

  • Semantic HTML: Use proper form elements with meaningful labels
  • Accessibility First: Built-in ARIA support and keyboard navigation
  • Progressive Enhancement: Works without JavaScript, enhanced with it
  • Minimal Markup: Clean HTML without excessive wrapper divs

Basic Form Structure

Every Axiom01 form follows this semantic pattern:

Optional help text

HTML Structure

<form>
  <div class="form-group">
    <label for="input-id">Label Text</label>
    <input type="text" id="input-id" placeholder="Placeholder">
    <small class="form-help">Help text</small>
  </div>

  <div class="form-actions">
    <button type="submit" class="primary">Submit</button>
  </div>
</form>

Input Types

Axiom01 styles all HTML5 input types consistently:

Form Validation

Axiom01 includes built-in styling for form validation states:

Validation Classes

  • .valid - Green border and success feedback
  • .invalid - Red border and error feedback
  • .warning - Orange border and warning feedback

Complex Form Layouts

For more complex forms, use grid layouts while maintaining semantic structure:

Personal Information
Preferences

Accessibility Features

Screen Readers

  • Proper label associations
  • ARIA attributes for complex controls
  • Fieldset and legend for grouping
  • Error announcements

Keyboard Navigation

  • Tab order follows logical flow
  • Focus indicators on all controls
  • Enter submits forms
  • Escape cancels modal forms

Visual Design

  • High contrast focus states
  • Clear error messaging
  • Consistent spacing and alignment
  • Readable font sizes

Form Best Practices

✅ Do

  • Use semantic HTML5 input types
  • Provide clear, descriptive labels
  • Group related fields with fieldset
  • Include helpful placeholder text
  • Validate on both client and server
  • Test with keyboard navigation
  • Test with screen readers

❌ Don't

  • Use placeholder text as labels
  • Create forms without proper validation
  • Ignore accessibility requirements
  • Use generic error messages
  • Make forms unnecessarily complex
  • Forget to test on mobile devices