Laravel Form Component

Free · MIT

Form container with section layout, grid support, and action alignment.

A Form built for the TALL stack — Blade, Livewire 3 & 4, Alpine.js and Tailwind CSS 4. Server-rendered by default, dark-mode ready, and WCAG-minded. Drop it in with a single Blade tag: <x-aura::form>

Try it live in the docs Install free

Installation

composer require bluestarsystem/aura-ui

Usage

<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>

See the full API, props and live examples in the Form documentation.

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

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