Fluxtor

#Introduction

The fieldset component provides a semantic and visually appealing way to group related form fields.

always use it with field component, it manage spacing properly.

#Installation

Use the fluxtor artisan command to install the fieldset component easily:

php artisan fluxtor:install fieldset

#Basic Usage

<x-ui.fieldset label="Personal Information">
    <x-ui.field required>
        <x-ui.label>Full Name</x-ui.label>
        <x-ui.input placeholder="John Doe" />
    </x-ui.field>
    
    <x-ui.field required>
        <x-ui.label>Email Address</x-ui.label>
        <x-ui.input type="email" placeholder="john@example.com" />
    </x-ui.field>
    
    <x-ui.field>
        <x-ui.label>Phone Number</x-ui.label>
        <x-ui.input type="tel" placeholder="+1 (555) 123-4567" />
    </x-ui.field>
</x-ui.fieldset>

#Without Label

Create fieldsets without visible labels for simple grouping.

<x-ui.fieldset>
    <!-- no label prop pass throught -->
</x-ui.fieldset>

#Grid Layout Inside Fieldset

Combine fieldsets with grid layouts for responsive form organization.

<x-ui.fieldset label="Contact Information">
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <x-ui.field required>
            <x-ui.label>First Name</x-ui.label>
            <x-ui.input placeholder="John" />
        </x-ui.field>
        
        <x-ui.field required>
            <x-ui.label>Last Name</x-ui.label>
            <x-ui.input placeholder="Doe" />
        </x-ui.field>
    </div>
    
    <x-ui.field required>
        <x-ui.label>Email Address</x-ui.label>
        <x-ui.input type="email" placeholder="john.doe@example.com" />
    </x-ui.field>
    
    <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
        <x-ui.field>
            <x-ui.label>Phone</x-ui.label>
            <x-ui.input type="tel" placeholder="+1 (555) 123-4567" />
        </x-ui.field>
        
        <x-ui.field>
            <x-ui.label>Country</x-ui.label>
            <x-ui.select>
                <x-ui.select.option value="us">United States</x-ui.select.option>
                <x-ui.select.option value="ca">Canada</x-ui.select.option>
                <x-ui.select.option value="uk">United Kingdom</x-ui.select.option>
            </x-ui.select>
        </x-ui.field>
    </div>
</x-ui.fieldset>

#Component Props

#Fieldset