Accessible one-time password component with copy paste functionality.
<x-portal::otp>
<x-portal::otp.group>
<x-portal::otp.input placeholder="○" index="0" />
<x-portal::otp.input placeholder="○" index="1" />
<x-portal::otp.input placeholder="○" index="2" />
<x-portal::otp.input placeholder="○" index="3" />
</x-portal::otp.group>
</x-portal::otp>
If you want to customize the components, you can publish them by running the following command :
php artisan vendor:publish --tag=portal-ui:otp --force
<x-portal::otp type="text">
<x-portal::otp.group>
<x-portal::otp.input placeholder="○" index="0" />
<x-portal::otp.input placeholder="○" index="1" />
<x-portal::otp.input placeholder="○" index="2" />
<x-portal::otp.input placeholder="○" index="3" />
</x-portal::otp.group>
</x-portal::otp>
<x-portal::otp>
<x-portal::otp.group>
<x-portal::otp.input placeholder="." index="0" size="sm"/>
<x-portal::otp.input placeholder="." index="1" size="sm"/>
<x-portal::otp.input placeholder="." index="2" size="sm"/>
</x-portal::otp.group>
</x-portal::otp>
<x-portal::otp>
<x-portal::otp.group>
<x-portal::otp.input placeholder="○" index="0"/>
<x-portal::otp.input placeholder="○" index="1"/>
<x-portal::otp.input placeholder="○" index="2"/>
</x-portal::otp.group>
</x-portal::otp>
<x-portal::otp>
<x-portal::otp.group>
<x-portal::otp.input placeholder="○" index="0" size="lg"/>
<x-portal::otp.input placeholder="○" index="1" size="lg"/>
<x-portal::otp.input placeholder="○" index="2" size="lg"/>
</x-portal::otp.group>
</x-portal::otp>
<x-portal::otp>
<x-portal::otp.group>
<x-portal::otp.input placeholder="○" index="0" size="xl"/>
<x-portal::otp.input placeholder="○" index="1" size="xl"/>
<x-portal::otp.input placeholder="○" index="2" size="xl"/>
</x-portal::otp.group>
</x-portal::otp>
<x-portal::otp disabled>
<x-portal::otp.group>
<x-portal::otp.input placeholder="○" index="0" />
<x-portal::otp.input placeholder="○" index="1" />
<x-portal::otp.input placeholder="○" index="2" />
<x-portal::otp.input placeholder="○" index="3" />
</x-portal::otp.group>
</x-portal::otp>
<x-portal::otp>
<x-portal::otp.group>
<x-portal::otp.input placeholder="○" index="0" />
<x-portal::otp.input placeholder="○" index="1" />
</x-portal::otp.group>
<x-portal::otp.separator />
<x-portal::otp.group>
<x-portal::otp.input placeholder="○" index="2" />
<x-portal::otp.input placeholder="○" index="3" />
</x-portal::otp.group>
<x-portal::otp.separator />
<x-portal::otp.group>
<x-portal::otp.input placeholder="○" index="4" />
<x-portal::otp.input placeholder="○" index="5" />
</x-portal::otp.group>
</x-portal::otp>
<x-portal::otp>
<x-portal::otp.group>
<x-portal::otp.input placeholder="○" index="0" />
<x-portal::otp.input placeholder="○" index="1" />
</x-portal::otp.group>
<x-portal::otp.separator icon="point-f"/>
<x-portal::otp.group>
<x-portal::otp.input placeholder="○" index="2" />
<x-portal::otp.input placeholder="○" index="3" />
</x-portal::otp.group>
<x-portal::otp.separator icon="point-f"/>
<x-portal::otp.group>
<x-portal::otp.input placeholder="○" index="4" />
<x-portal::otp.input placeholder="○" index="5" />
</x-portal::otp.group>
</x-portal::otp>
<x-portal::form action="{{ route('form') }}" method="POST">
@csrf
<x-portal::form.group
label="One-Time Password"
name="otp"
description-trailing=" Please enter the one-time password sent to your phone."
>
<x-portal::otp name="otp">
<x-portal::otp.group>
<x-portal::otp.input value="1" index="0" />
<x-portal::otp.input value="1" index="1" />
<x-portal::otp.input value="1" index="2" />
<x-portal::otp.input value="1" index="3" />
<x-portal::otp.input value="1" index="4" />
<x-portal::otp.input value="1" index="5" />
</x-portal::otp.group>
</x-portal::otp>
</x-portal::form.group>
<x-portal::button x-bind:loading="submited" type="submit">Submit</x-portal::button>
</x-portal::form>