Form Group

Groups related form inputs with responsive grid support.

Examples

Basic Group

Notifications

Choose how you want to be notified.

blade 
<x-plume::form 
    formData="{ 'notifications': [] }">
    <x-plume::form.group label="Notifications" description="Choose how you want to be notified.">
        <x-plume::form.checkbox label="Email" name="notifications[]" value="email" />
        <x-plume::form.checkbox label="SMS" name="notifications[]" value="sms" />
        <x-plume::form.checkbox label="Push" name="notifications[]" value="push" />
    </x-plume::form.group>
</x-plume::form>

Grid Layout

Layout Options

blade 
<x-plume::form 
    formData="{ 'layout': '' }">
    <x-plume::form.group label="Layout Options" :minCols="2">
        <x-plume::form.radio label="Option 1" name="layout" value="1" />
        <x-plume::form.radio label="Option 2" name="layout" value="2" />
        <x-plume::form.radio label="Option 3" name="layout" value="3" />
        <x-plume::form.radio label="Option 4" name="layout" value="4" />
    </x-plume::form.group>
</x-plume::form>
Prop Type Default Description
label string null Label for the group of inputs.
description string null Help text for the group.
minCols int 1 Grid columns for the inner inputs.
model string null Shared AlpineJS model name for child inputs.
name string null Shared name attribute for child inputs.

Usage

blade 
<x-plume::form >
    <x-plume::form.group label="Preferences" model="user.prefs"
        description="Your application preferences">
        <x-plume::form.toggle label="Dark Mode" name="dark_mode" />
        <x-plume::form.toggle label="Newsletter" name="newsletter" />
    </x-plume::form.group>
</x-plume::form>