Field Set

Create a logical group of inputs within a form, with optional title, side bar for contextual information or help, as well as an optional footer. If the Field Set component is placed inside a Form component, a title is provided and the index-prop is not set to false, each Field Set will automatically render an index number next to its title.

'index' => true,
'title' => false,
'annotation' => false,
'aside' => false,
'footer' => false,
<x-fieldSet>
    <x-layout.grid cols="2" class="gap-x-6">
        <x-inputBlock label="Kontoinhaber (Vor- und Nachname)" id="bank-account-holder" class="col-span-2">
            <x-inputField size="lg" required />
        </x-inputBlock>
        <x-inputBlock label="Name der Bank" id="bank-name" class="col-span-2">
            <x-inputField size="lg" required />
        </x-inputBlock>
        <x-inputBlock label="IBAN" id="iban">
            <x-inputField size="lg" required />
        </x-inputBlock>
        <x-inputBlock label="BIC" id="BIC">
            <x-inputField size="lg" required />
        </x-inputBlock>
    </x-layout.grid>
</x-fieldSet>
Kontoinformationen

Hinweis

Wenn sie diese Daten ändern, müssen sie ggf. eine erneute Identifikation durchführen. Dies ist für uns gesetzlich verpflichtend und schützt sie vor Betrug!

Bis zum Zeitpunkt der erneuten Identifikation, haben sie nur beschränkten Zugriff auf ihr Konto — sie können beispielsweise keine Transaktionen mehr durchführen. 

<x-fieldSet title="Kontoinformationen" index="false">
    <x-layout.grid cols="2" class="gap-x-6">
        <x-inputBlock label="Kontoinhaber (Vor- und Nachname)" id="bank-account-holder" class="col-span-2">
            <x-inputField size="lg" required />
        </x-inputBlock>
        <x-inputBlock label="Name der Bank" id="bank-name" class="col-span-2">
            <x-inputField size="lg" required />
        </x-inputBlock>
        <x-inputBlock label="IBAN" id="iban">
            <x-inputField size="lg" required />
        </x-inputBlock>
        <x-inputBlock label="BIC" id="BIC">
            <x-inputField size="lg" required />
        </x-inputBlock>
    </x-layout.grid>
    <x-slot:aside>
        <h4>Hinweis</h4>
        <p>
            Wenn sie diese Daten ändern, müssen sie ggf. eine erneute Identifikation durchführen.
            Dies ist für uns gesetzlich verpflichtend und schützt sie vor Betrug!
        </p>
        <p>
            Bis zum Zeitpunkt der erneuten Identifikation, haben sie nur beschränkten Zugriff auf
            ihr Konto — sie können beispielsweise keine Transaktionen mehr durchführen.
        </p>
    </x-slot>
    <x-slot:footer>
        <x-button variant="primary" label="Speichern" />
    </x-slot>
</x-fieldSet>