Skip to main content Skip to navigation Skip to search Skip to footer

📋 Forms & Navigation

Complete form elements and navigation components with validation and interactive states

🎭 Component Demonstrations

Complete form elements and navigation components with validation and interactive states

📋 Form Components

Basic Form Elements

Input Fields
Select & Textarea

Toggle Switches & Enhanced Controls

💡 Usage Guidelines:
  • • Use toggle switches for settings that take effect immediately
  • • Use checkboxes for options that require form submission
  • • Range sliders work best for numeric value selection
  • • All controls support keyboard navigation and screen readers
Toggle Switches

Receive promotional offers

Range Sliders
0% 100%
Low Medium High Ultra
Custom Controls

Newsletter Preferences

Payment Method

Validation States

Email is valid

Please enter a valid email address

This looks like a temporary email address

Complete Contact Form

🧭 Navigation Components

Breadcrumbs

Basic Breadcrumb
Icon Breadcrumb

Pagination

Standard Pagination
Simple Pagination

📝 Usage Examples

Implementation patterns and code snippets for forms and navigation components

Basic Form Field Usage

Standard form input with Alpine.js data binding and validation

<div x-data="{ email: '', emailError: '' }">
  <label class="block text-sm font-medium text-gray-700 mb-2">
    Email Address *
  </label>
  <input x-model="email" 
         type="email"
         @blur="emailError = !email ? 'Email is required' : ''"
         :class="emailError ? 'border-red-500' : 'border-gray-300'"
         class="w-full px-4 py-3 border rounded-lg focus:ring-2 focus:ring-blue-500"
         placeholder="[email protected]">
  <p x-show="emailError" x-text="emailError" class="mt-1 text-sm text-red-600"></p>
</div>

Navigation Component Usage

Responsive navigation with dropdown menus and Alpine.js state management

<nav x-data="{ activeDropdown: null }" class="flex items-center justify-between">
  <div class="flex items-center space-x-8">
    <div class="relative">
      <button @click="activeDropdown = activeDropdown === 'products' ? null : 'products'"
              class="flex items-center gap-1 text-gray-700 hover:text-blue-600">
        Products
        <svg class="w-4 h-4" fill="none" stroke="currentColor">
          <path d="M19 9l-7 7-7-7"></path>
        </svg>
      </button>
      <div x-show="activeDropdown === 'products'"
           @click.outside="activeDropdown = null"
           class="absolute top-full left-0 mt-2 w-48 bg-white border rounded-lg shadow-lg">
        <a href="#" class="block px-4 py-2 text-sm hover:bg-gray-100">All Products</a>
      </div>
    </div>
  </div>
</nav>

Form Validation with Alpine.js

Complete form validation pattern with error handling and submission states

<form x-data="{ 
        formData: { name: '', email: '', message: '' },
        errors: {},
        isSubmitting: false,
        validateForm() {
          this.errors = {};
          if (!this.formData.name) this.errors.name = 'Name is required';
          if (!this.formData.email) this.errors.email = 'Email is required';
          if (!this.formData.message) this.errors.message = 'Message is required';
          return Object.keys(this.errors).length === 0;
        },
        submitForm() {
          if (!this.validateForm()) return;
          this.isSubmitting = true;
          // Submit logic here
        }
      }" 
      @submit.prevent="submitForm()">
  
  <input x-model="formData.name" 
         :class="errors.name ? 'border-red-500' : 'border-gray-300'"
         class="w-full px-4 py-3 border rounded-lg">
  <p x-show="errors.name" x-text="errors.name" class="text-red-600"></p>
  
  <button :disabled="isSubmitting" type="submit" 
          class="bg-blue-600 text-white px-6 py-3 rounded-lg">
    <span x-show="!isSubmitting">Submit</span>
    <span x-show="isSubmitting">Submitting...</span>
  </button>
</form>

⚡ Performance & Accessibility

Best practices for creating inclusive and performant form and navigation experiences

Form Accessibility

Proper semantic HTML with ARIA labels ensures all form elements are accessible to screen readers. Use explicit label associations and descriptive error messages for optimal user experience across all abilities.

Navigation Performance

Lazy loading and efficient Alpine.js state management minimize initial page load. Smart caching strategies and progressive enhancement ensure navigation remains responsive even on slower connections.

Mobile-Friendly Design

Touch-optimized input fields with appropriate sizing and spacing. Mobile-first responsive design ensures forms adapt seamlessly across all device sizes with proper touch targets and gesture support.

Keyboard Navigation

Full keyboard accessibility with logical tab order and focus management. Skip links and keyboard shortcuts provide efficient navigation for power users and assistive technology users alike.