Progress Button

Link a Progress Button to a form via its form property to display a progress bar representing the percentage of filled form fields. Only input fields with required attribute are observed. When 100% is reached, the button style changes to primary.

'form' => false,
'progress' => 0,
'initialLabel' => 'Bitte alle Felder ausfüllen',
'buttonLabel' => 'Button Label',
'progressLabel' => 'ausgefüllt',
Bitte alle Felder ausfüllen 
<form id="sample-form" class="flex flex-col gap-2 max-w-[480px]">
    <x-inputBlock label="Vorname" class="grow">
        <x-inputField required />
    </x-inputBlock>
    <x-inputBlock label="Nachname" class="grow">
        <x-inputField required />
    </x-inputBlock>
    <x-inputBlock label="Titel" class="grow">
        <x-inputField />
    </x-inputBlock>
    <x-inputBlock label="Staatsangehörigkeit" class="grow">
        <x-inputField required />
    </x-inputBlock>
    <x-checkbox id="sample-checkbox" required>
        <x-slot:label>
            Ich stimme den AGB zu.
        </x-slot>
    </x-checkbox>
    <x-formFooter>
        <x-progressButton class="grow" form="sample-form" button-label="Weiter" progress-label="ausgefüllt" initial-label="Bitte alle Felder ausfüllen" />
    </x-formFooter>
</form>