OTP

Inputs para códigos de un solo uso (verificación 2FA, recuperación de contraseña). Uno por dígito, con auto-foco entre celdas.

SMS — 6 dígitos con separador

<div class="otp">
    <input type="text" class="otp-cell" maxlength="1"
      value="3"
      inputmode="numeric" pattern="[0-9]"
      autocomplete="one-time-code"/>
    <input type="text" class="otp-cell" maxlength="1"
      value="9"
      inputmode="numeric" pattern="[0-9]"
      autocomplete="one-time-code"/>
    <input type="text" class="otp-cell" maxlength="1"
      value="2"
      inputmode="numeric" pattern="[0-9]"
      autocomplete="one-time-code"/>
    <span class="otp-sep" aria-hidden="true">—</span>
    <input type="text" class="otp-cell" maxlength="1"
      
      inputmode="numeric" pattern="[0-9]"
      autocomplete="one-time-code"/>
    <input type="text" class="otp-cell" maxlength="1"
      
      inputmode="numeric" pattern="[0-9]"
      autocomplete="one-time-code"/>
    <input type="text" class="otp-cell" maxlength="1"
      
      inputmode="numeric" pattern="[0-9]"
      autocomplete="one-time-code"/>
</div>

{% from "input-otp.jinja" import input_otp %}
{{ input_otp(length=6, value="392", separator_at=3) }}

<InputOtplength="6" value="392" separator_at="3" />

Install the Jinja addon and import the component:

pip install outfitkit

Then in your template:

{% from "&lt;component&gt;.jinja" import &lt;component&gt; %}
{{ &lt;component&gt;(...) }}

Or with JinjaX:

<Component ... />

Pequeño — 4 dígitos

<div class="otp sm">
    <input type="text" class="otp-cell" maxlength="1"
      value="1"
      inputmode="numeric" pattern="[0-9]"
      autocomplete="one-time-code"/>
    <input type="text" class="otp-cell" maxlength="1"
      value="2"
      inputmode="numeric" pattern="[0-9]"
      autocomplete="one-time-code"/>
    <input type="text" class="otp-cell" maxlength="1"
      value="3"
      inputmode="numeric" pattern="[0-9]"
      autocomplete="one-time-code"/>
    <input type="text" class="otp-cell" maxlength="1"
      value="4"
      inputmode="numeric" pattern="[0-9]"
      autocomplete="one-time-code"/>
</div>

{% from "input-otp.jinja" import input_otp %}
{{ input_otp(length=4, value="1234", size="sm") }}

<InputOtplength="4" value="1234" size="sm" />

Install the Jinja addon and import the component:

pip install outfitkit

Then in your template:

{% from "&lt;component&gt;.jinja" import &lt;component&gt; %}
{{ &lt;component&gt;(...) }}

Or with JinjaX:

<Component ... />

Grande — alfanumérico

<div class="otp lg">
    <input type="text" class="otp-cell" maxlength="1"
      
      inputmode="text" pattern="[A-Za-z0-9]"
      autocomplete="one-time-code"/>
    <input type="text" class="otp-cell" maxlength="1"
      
      inputmode="text" pattern="[A-Za-z0-9]"
      autocomplete="one-time-code"/>
    <input type="text" class="otp-cell" maxlength="1"
      
      inputmode="text" pattern="[A-Za-z0-9]"
      autocomplete="one-time-code"/>
    <input type="text" class="otp-cell" maxlength="1"
      
      inputmode="text" pattern="[A-Za-z0-9]"
      autocomplete="one-time-code"/>
</div>

{% from "input-otp.jinja" import input_otp %}
{{ input_otp(length=4, size="lg", mode="alphanumeric") }}

<InputOtplength="4" size="lg" mode="alphanumeric" />

Install the Jinja addon and import the component:

pip install outfitkit

Then in your template:

{% from "&lt;component&gt;.jinja" import &lt;component&gt; %}
{{ &lt;component&gt;(...) }}

Or with JinjaX:

<Component ... />

API

Prop	Tipo	Default	Descripción
`length`	int	6	Número de celdas.
`value`	str	""	Valor pre-rellenado (1 carácter por celda).
`size`	str	"md"	`sm` · `md` · `lg`.
`mode`	str	"numeric"	`numeric` (solo dígitos) · `alphanumeric` (A-Z + 0-9, se normaliza a mayúsculas).
`separator_at`	int	None	Inserta separador `—` antes de la celda i.
`attrs`	dict	None	Atributos extra.