OtpInput

Use OtpInput quando a pessoa informar um código numérico curto, como na verificação em duas etapas. Cada dígito tem sua caixa; o valor completo sai por onChange e, com name, por um único campo oculto no formulário.

Exemplos

Código de seis dígitos

A digitação avança para a próxima caixa. Colar o código inteiro distribui os dígitos, mesmo com espaços ou hífens no texto.

Verification code

Enter the six-digit code.

Código inválido ou expirado

error substitui hint, marca os dígitos como inválidos e associa a mensagem ao grupo.

Verification code

That code has expired. Request a new one.

Acessibilidade

O label visível nomeia o grupo; cada dígito anuncia sua posição. Use digitLabel para traduzir a palavra “Digit”.
O primeiro campo tem autocomplete="one-time-code"; todos usam teclado numérico. Um código preenchido automaticamente no primeiro campo é distribuído pelas caixas.
As setas esquerda e direita movem o foco. Home e End vão ao primeiro e último dígito. Backspace apaga o dígito atual ou volta quando ele está vazio. Tab mantém a ordem normal dos campos.
error é associado por aria-describedby e marca cada dígito com aria-invalid.

API e código

Blade: O snapshot de API lançado do Blade v0.10.0 não tem componente para esta entrada do catálogo.

Nome	Tipo	Obrigatória	Descrição
`label`	`string`	Obrigatória	Visible and accessible label for the whole code.
`length`	`number`	—	Number of digits. Default: 6.
`value`	`string`	—	Controlled code, containing only digits.
`defaultValue`	`string`	—	Initial code in uncontrolled mode.
`onChange`	`(value: string) => void`	—	Called with the complete current code after each edit.
`name`	`string`	—	Name of a hidden input that submits the combined code.
`hint`	`string`	—	Hint shown below the group, replaced by error.
`error`	`string`	—	Visible error, connected to the group and every digit.
`disabled`	`boolean`	—	Disables all digit inputs.
`className`	`string`	—	Additional class on the group.
`id`	`string`	—	Optional stable id for the group.
`digitLabel`	`string`	—	Localized word used in each digit's accessible name. Default: "Digit".

x-data="lyraOtpInput({ … })"

Opção	Tipo	Obrigatória	Descrição
`length`	`number`	—	Number of numeric digits. Default: 6.
`defaultValue`	`string`	—	Initial code.
`invalid`	`boolean`	—	Adds an invalid state; serve an error message and aria-describedby in the markup.
`digitLabel`	`string`	—	Localized word for each digit's accessible name. Default: "Digit".

html

<div
  class="lyra-field"
  x-data="lyraOtpInput({ length: 6, digitLabel: 'Dígito' })"
  x-modelable="code"
>
  <span id="code-label" class="lyra-label">Código de verificação</span>
  <div class="lyra-otp" role="group" aria-labelledby="code-label">
    <template x-for="index in positions" :key="index">
      <input
        class="lyra-input lyra-otp__digit"
        type="text"
        :data-index="index"
        inputmode="numeric"
        pattern="[0-9]*"
        :autocomplete="index === 0 ? 'one-time-code' : 'off'"
        x-bind="digit"
      />
    </template>
  </div>
  <input type="hidden" name="code" x-bind:value="code" />
</div>

Sirva o label e a mensagem de erro no HTML. Na falha de validação, defina invalid: true, aria-describedby no grupo e mostre uma mensagem com esse id. Ouça lyra:change na raiz ou vincule code com x-model.