PIN Code

<x-aura::flex direction="col" align="start" gap="2">
    <x-aura::label>
        Enter 4 Digit Passcode
    </x-aura::label>

    <x-aura::pin-code length="4" size="md" />
</x-aura::flex>

<x-aura::card size="2xl" padding="xl" gap="6">
    <x-aura::flex direction="col" align="center" gap="4" class="text-center">
        <x-aura::heading level="3" size="lg">
            Two Step Verification
        </x-aura::heading>

        <x-aura::text size="sm" variant="subtle">
            Please enter the 6 digit code generated by your authenticator app.
        </x-aura::text>

        <x-aura::pin-code length="6" size="lg" />

        <x-aura::button variant="primary" size="md">
            Verify
        </x-aura::button>
    </x-aura::flex>
</x-aura::card>

<x-aura::pin-code length="4" size="sm" />
<x-aura::pin-code length="4" size="md" />
<x-aura::pin-code length="4" size="lg" />