Portal UI

Input OTP / PIN

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>

Publishing Component

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


Allow Text 

<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>


Size 




<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>


Disabled 

<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>


Separator 

<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>


Icon Separator 

<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>


Form

Please enter the one-time password sent to your phone. 

<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>