Skip to content

Overview

The Form component provides a structured layout system for building forms. It consists of three parts: the <x-aura::form> wrapper, <x-aura::form.section> for grouping related fields with optional title and description, and <x-aura::form.actions> for button placement. Sections support multi-column grids and an aside layout pattern.

Use the form component for:

  • Settings pages with grouped sections
  • Multi-step form layouts
  • Admin panel data entry
  • Any form requiring organized field groups

Basic Usage

Personal Information

<x-aura::form action="/save" method="POST">
    <x-aura::form.section title="Personal Information">
        <x-aura::input label="Name" name="name" />
        <x-aura::input label="Email" name="email" type="email" />
    </x-aura::form.section>

    <x-aura::form.actions>
        <x-aura::button type="submit" variant="primary">Save</x-aura::button>
    </x-aura::form.actions>
</x-aura::form>

Props

Form

The <x-aura::form> wrapper accepts no specific props. All standard HTML <form> attributes are passed through (e.g., action, method, enctype, wire:submit).

Form Section

Prop Type Default Description
title string|null null Section heading
description string|null null Supplementary text below the title
columns int 1 Grid columns for the content area: 1, 2, or 3
aside bool false Aside layout: header on the left, fields on the right

Form Actions

Prop Type Default Description
align string 'end' Button alignment: start, center, end, between

Variants/Examples

Complete Settings Form

Profile

Your public profile information.

Password

Update your password.

<x-aura::form action="/settings" method="POST">
    @csrf

    <x-aura::form.section title="Profile" description="Your public profile information.">
        <x-aura::input label="Display Name" name="display_name" required />
        <x-aura::input label="Email" name="email" type="email" required />
    </x-aura::form.section>

    <x-aura::form.section title="Password" description="Update your password.">
        <x-aura::input label="Current Password" name="current_password" type="password" />
        <x-aura::input label="New Password" name="password" type="password" />
        <x-aura::input label="Confirm Password" name="password_confirmation" type="password" />
    </x-aura::form.section>

    <x-aura::form.actions>
        <x-aura::button variant="ghost" href="/dashboard">Cancel</x-aura::button>
        <x-aura::button type="submit" variant="primary">Save Changes</x-aura::button>
    </x-aura::form.actions>
</x-aura::form>

Two-Column Grid

Address

<x-aura::form.section title="Address" columns="2">
    <x-aura::input label="Street" name="street" />
    <x-aura::input label="City" name="city" />
    <x-aura::input label="State" name="state" />
    <x-aura::input label="ZIP Code" name="zip" />
</x-aura::form.section>

Three-Column Grid

Dimensions

cm
cm
cm 
<x-aura::form.section title="Dimensions" columns="3">
    <x-aura::input label="Width" name="width" type="number" suffix="cm" />
    <x-aura::input label="Height" name="height" type="number" suffix="cm" />
    <x-aura::input label="Depth" name="depth" type="number" suffix="cm" />
</x-aura::form.section>

Aside Layout

The aside layout places the title and description on the left and the form fields on the right, suitable for wide screens.

Notifications

Choose how you want to be notified.

<x-aura::form.section
    title="Notifications"
    description="Choose how you want to be notified."
    aside
>
    <x-aura::checkbox label="Email notifications" name="notify_email" />
    <x-aura::checkbox label="SMS notifications" name="notify_sms" />
    <x-aura::checkbox label="Push notifications" name="notify_push" />
</x-aura::form.section>

Action Alignment Variants

{{-- Right aligned (default) --}}
<x-aura::form.actions>
    <x-aura::button type="submit" variant="primary">Save</x-aura::button>
</x-aura::form.actions>

{{-- Space between --}}
<x-aura::form.actions align="between">
    <x-aura::button variant="danger">Delete Account</x-aura::button>
    <x-aura::button type="submit" variant="primary">Save</x-aura::button>
</x-aura::form.actions>

{{-- Left aligned --}}
<x-aura::form.actions align="start">
    <x-aura::button type="submit" variant="primary">Submit</x-aura::button>
</x-aura::form.actions>

With Livewire

<x-aura::form wire:submit="save">
    <x-aura::form.section title="Quick Add">
        <x-aura::input label="Title" wire:model="title" />
    </x-aura::form.section>

    <x-aura::form.actions>
        <x-aura::button type="submit" variant="primary" wire:loading.attr="disabled">
            Save
        </x-aura::button>
    </x-aura::form.actions>
</x-aura::form>

Slots

Form

Slot Description
Default Form sections, fields, and action bars

Form Section

Slot Description
Default Form fields placed inside the grid layout

Form Actions

Slot Description
Default Action buttons (submit, cancel, etc.)

Accessibility

  • The <x-aura::form> renders a semantic <form> element.
  • Section titles render as <h3> for proper document structure.
  • Use <fieldset> and <legend> inside sections when grouping related radio buttons or checkboxes.
  • Always include a visible submit button for keyboard users.
  • The actions bar is visually separated from form content for clear visual hierarchy.
  • When using Livewire, wire:submit prevents the default form submission, making the form work as a SPA.