📋 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
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
Navigation Menu
📝 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.