Otp

Le composant OTP (One Time Password) est utilisé lors d'une authentification double facteurs.

Code de base

Le composant OTP par défaut

Aperçu

Mode responsive

Saisir le code

                                                        <p class="text has-text-grey">Saisir le code</p>
                            <div class="otp-list">
                                <input class="otp" type="text" maxlength="1">
                                <input class="otp" type="text" maxlength="1">
                                <input class="otp" type="text" maxlength="1">
                                <input class="otp" type="text" maxlength="1">
                                <input class="otp" type="text" maxlength="1">
                                <input class="otp" type="text" maxlength="1">
                            </div>

Composant OTP rempli

Le composant OTP lorsqu'il est rempli

Aperçu

Mode responsive

Saisir le code

                                                        <p class="text">Saisir le code</p>
                            <div class="otp-list is-tertiary">
                                <input class="otp" type="text" maxlength="1">
                                <input class="otp" type="text" maxlength="1">
                                <input class="otp" type="text" maxlength="1">
                                <input class="otp" type="text" maxlength="1">
                                <input class="otp" type="text" maxlength="1">
                                <input class="otp" type="text" maxlength="1">
                            </div>

Composant OTP en erreur

Le composant OTP lorsqu'il est en erreur

Aperçu

Mode responsive

Saisir le code

                                                        <p class="text has-text-danger">Saisir le code</p>
                            <div class="otp-list is-danger">
                                <input class="otp" type="text" maxlength="1">
                                <input class="otp" type="text" maxlength="1">
                                <input class="otp" type="text" maxlength="1">
                                <input class="otp" type="text" maxlength="1">
                                <input class="otp" type="text" maxlength="1">
                                <input class="otp" type="text" maxlength="1">
                            </div>