Building Beautiful Forms with Aura UI

The Problem with Forms

Forms are the backbone of most web applications, yet they are notoriously tedious to build well. You need consistent styling, proper labels, validation error display, accessibility attributes, and dark mode support. Multiply that by every form in your app and you have a maintenance headache.

Aura UI solves this by providing a complete set of form components that handle all of these concerns automatically.

Input Components

The <x-aura::input> component replaces the standard HTML input with a fully styled, accessible version:

<x-aura::input
    label="Email Address"
    name="email"
    type="email"
    placeholder="[email protected]"
    help="We'll never share your email with anyone."
    required
/>

This single component generates a label, the input field, help text, and an error message container that automatically displays Laravel validation errors. It also includes proper id, for, and aria-describedby attributes.

Validation States

When validation fails, the component automatically picks up errors from the $errors bag:

{{-- The component reads $errors->get('email') automatically --}}
<x-aura::input label="Email" name="email" :value="old('email')" />

The input border turns red, an error icon appears, and the validation message is displayed below the field. No extra code needed.

Select and Textarea

Dropdowns and text areas follow the same pattern:

<x-aura::select label="Country" name="country">
    <option value="">Choose a country</option>
    <option value="it">Italy</option>
    <option value="de">Germany</option>
    <option value="us">United States</option>
</x-aura::select>

<x-aura::textarea
    label="Bio"
    name="bio"
    rows="3"
    placeholder="Tell us about yourself..."
    maxlength="500"
/>

Toggle and Checkbox

For boolean fields, the toggle component provides a polished switch:

<x-aura::toggle
    label="Enable notifications"
    name="notifications"
    :checked="$user->notifications_enabled"
/>

<x-aura::checkbox
    label="I agree to the terms and conditions"
    name="terms"
    required
/>

Putting It All Together

Here is a complete registration form using Aura UI:

<x-aura::card class="max-w-lg mx-auto">
    <x-aura::card.header>
        <h2 class="text-xl font-bold">Create Account</h2>
        <p class="text-sm text-gray-500">Join thousands of developers.</p>
    </x-aura::card.header>
    <x-aura::card.body>
        <form method="POST" action="/register" class="space-y-4">
            @csrf
            <x-aura::input label="Name" name="name" :value="old('name')" required />
            <x-aura::input label="Email" name="email" type="email" :value="old('email')" required />
            <x-aura::input label="Password" name="password" type="password" required />
            <x-aura::input label="Confirm Password" name="password_confirmation" type="password" required />
            <x-aura::toggle label="Subscribe to newsletter" name="newsletter" />
            <x-aura::checkbox label="I agree to the Terms of Service" name="terms" required />
            <x-aura::button type="submit" variant="primary" class="w-full">
                Create Account
            </x-aura::button>
        </form>
    </x-aura::card.body>
</x-aura::card>

This produces a clean, consistent form that works in both light and dark mode, handles validation gracefully, and meets WCAG 2.1 AA accessibility standards.

Tips for Better Forms

• Use help text to clarify expectations: help="Minimum 8 characters"
• Group related fields with <div class="grid grid-cols-2 gap-4"> for side-by-side inputs
• Leverage Livewire for real-time validation by adding wire:model to any Aura UI component
• Keep forms short by splitting long workflows into multi-step wizards

Aura UI form components save you from writing hundreds of lines of repetitive HTML while ensuring every form in your application looks and behaves consistently.