Input Toggle

Toggle the visibility of any element via a Checkbox or Radio Button by wrapping the associated elements inside the Input Toggle component. Use the data-toggle and data-toggle-target attributes to link the associated elements as shown in the code example below.

This component is designed to toggle conditional form inputs. The required attributes on hidden input fields are removed and added back when visible.

 
<x-inputToggle>
    <div data-toggle>
        <x-checkbox id="sample-toggle-checkbox" label="Ich verwende meine eigene Wallet" />
    </div>
    <div data-toggle-target>
        <x-inputBlock id="sample-toggle-input" label="Wallet ID" class="mt-6">
            <x-inputField required />
        </x-inputBlock>
    </div>
</x-inputToggle>