Document

Form Groups provide a structured way to organize complex forms into logical sections. They automatically adapt to container width and provide clear visual separation between form sections.

Personal Information

Basic information about your account

Name

Email Address

1<x-form-group>
2    <x-form-group.row title="Personal Information" description="Basic information about your account">
3        <x-input label="Name" placeholder="Enter your name" />
4        <x-input label="Email Address" type="email" placeholder="Enter your email" />
5    </x-form-group.row>
6</x-form-group>

Form Group with Header

Add a title and description to the entire form group using the title and description attributes.

Personal Information

Basic information about your account

Name

Email Address

1<x-form-group title="Account Settings" description="Configure your account preferences and security settings">
2    <x-form-group.row title="Personal Information" description="Basic information about your account">
3        <x-input label="Name" placeholder="Enter your name" />
4        <x-input label="Email Address" type="email" placeholder="Enter your email" />
5    </x-form-group.row>
6</x-form-group>

Form Group Rows

Use x-form-group.row to create individual sections within a form group. Each row has a details section for titles/descriptions and a content area for form fields.

Personal Information

Basic information about your account

Name

Email Address

Business Address

Where your company is located

Street Address

City

State

ZIP

 1<x-form-group>
 2    <x-form-group.row title="Personal Information" description="Basic information about your account">
 3        <x-input label="Name" placeholder="Enter your name" />
 4        <x-input label="Email Address" type="email" placeholder="Enter your email" />
 5    </x-form-group.row>
 6 
 7    <x-form-group.row title="Business Address" description="Where your company is located">
 8        <x-input label="Street Address" placeholder="123 Main Street" />
 9        <x-input label="City" placeholder="New York" style="flex: 1;" />
10        <x-input label="State" placeholder="NY" style="flex: 0 0 80px;" />
11        <x-input label="ZIP" placeholder="10001" style="flex: 0 0 100px;" />
12        <x-select id="form-group-country" label="Country" placeholder="Select country">
13            <x-option value="us">United States</x-option>
14            <x-option value="ca">Canada</x-option>
15            <x-option value="uk">United Kingdom</x-option>
16        </x-select>
17    </x-form-group.row>
18</x-form-group>

Subtle Row Styling

Use the subtle attribute on form group rows to add visual distinction between the details and content areas.

Basic Setup

Essential project information

Project Name

Description

 1<x-form-group title="Project Configuration" description="Set up your new project with the following options">
 2    <x-form-group.row subtle title="Basic Setup" description="Essential project information">
 3        <x-input label="Project Name" placeholder="My Awesome Project" />
 4        <x-input label="Description" placeholder="Brief description of your project" />
 5        <x-select id="form-group-project-type" label="Project Type" placeholder="Choose project type">
 6            <x-option value="web">Web Application</x-option>
 7            <x-option value="mobile">Mobile App</x-option>
 8            <x-option value="api">API Service</x-option>
 9        </x-select>
10    </x-form-group.row>
11</x-form-group>

Form Element with Footer

Use the form attribute to render the form group as an actual <form> element instead of a <div>. Add x-form-group.footer for action buttons like submit or cancel.

Use align="end", align="start" or align="center" on the footer to align the buttons.

 1<x-form-group form wire:submit.prevent="saveProfile" title="User Profile Settings" description="Update your profile information and preferences">
 2 
 3    <x-form-group.row title="Personal Information" description="Basic information about your account">
 4        <x-input label="Name" placeholder="Enter your name" />
 5        <x-input label="Email Address" type="email" placeholder="Enter your email" />
 6    </x-form-group.row>
 7 
 8    <x-form-group.footer align="end">
 9        <x-button type="gray" onclick="alert('Changes canceled')">
10            Cancel
11        </x-button>
12        <x-button type="primary" onclick="alert('Profile saved')">
13            Save Changes
14        </x-button>
15    </x-form-group.footer>
16</x-form-group>

Responsive Behavior

Form groups automatically adapt their layout based on container width. On smaller screens, the layout changes from side-by-side to stacked vertically.

Personal Information

Name

Email Address

Business Address

Street Address

City

State

ZIP

 1<div style="max-width: 400px; width: 100%;">  <!-- Constrained width to show responsive behavior -->
 2    <x-form-group title="Responsive Form Demo" description="Resize your browser to see how the form adapts to different screen sizes">
 3        <x-form-group.row title="Personal Information">
 4            <x-input label="Name" placeholder="Enter your name" />
 5            <x-input label="Email Address" type="email" placeholder="Enter your email" />
 6        </x-form-group.row>
 7 
 8        <x-form-group.row title="Business Address">
 9            <x-input label="Street Address" placeholder="123 Main Street" />
10            <x-input label="City" placeholder="New York" style="flex: 1;" />
11            <x-input label="State" placeholder="NY" style="flex: 0 0 80px;" />
12            <x-input label="ZIP" placeholder="10001" style="flex: 0 0 100px;" />
13            <x-select id="form-group-country" label="Country" placeholder="Select country">
14                <x-option value="us">United States</x-option>
15                <x-option value="ca">Canada</x-option>
16                <x-option value="uk">United Kingdom</x-option>
17            </x-select>
18        </x-form-group.row>
19    </x-form-group>
20</div>