Input OTP

Um campo para código de uso único: casas de um caractere, com avanço automático, backspace e colar.

Instalação

O Shadwire segue o modelo open code do shadcn/ui: o código-fonte do componente é copiado para o seu app e passa a ser seu. Instale com a CLI:

shadwire add input-otp --yes

O item input-otp do registry instala estes arquivos:

app/components/ui_component.rb
app/components/ui/input_otp_component.rb
app/components/ui/input_otp/group_component.rb
app/components/ui/input_otp/slot_component.rb
app/components/ui/input_otp/separator_component.rb
app/helpers/ui/input_otp_helper.rb
app/javascript/controllers/ui_input_otp_controller.js
vendor/shadwire/shadwire.css

Este componente usa Stimulus, então a aplicação precisa de importmap-rails e stimulus-rails com carregamento automático de controllers.

Ainda não instalou a CLI? gem install shadwire e depois shadwire init.

Uso

<%= ui_input_otp(name: "code") do %>
  <%= ui_input_otp_group do %>
    <%= ui_input_otp_slot %>
    <%= ui_input_otp_slot %>
  <% end %>
<% end %>

Exemplos

Padrão

Dois grupos de três casas separados por um traço.

<%= ui_input_otp(name: "code") do %>
  <%= ui_input_otp_group do %>
    <%= ui_input_otp_slot %>
    <%= ui_input_otp_slot %>
    <%= ui_input_otp_slot %>
  <% end %>
  <%= ui_input_otp_separator %>
  <%= ui_input_otp_group do %>

<%= ui_input_otp(name: "code") do %>
  <%= ui_input_otp_group do %>
    <%= ui_input_otp_slot %>
    <%= ui_input_otp_slot %>
    <%= ui_input_otp_slot %>
  <% end %>
  <%= ui_input_otp_separator %>
  <%= ui_input_otp_group do %>
    <%= ui_input_otp_slot %>
    <%= ui_input_otp_slot %>
    <%= ui_input_otp_slot %>
  <% end %>
<% end %>

Referência da API

Toda parte aceita class / class_name e **attrs.

Componente	Argumento	Padrão	Descrição
`InputOtp`	`name`	`nil`	O nome do input oculto que envia o código inteiro.
`InputOtp`	`value`	`nil`	Um código para começar.
`InputOtp::Slot`	`value`	`nil`	O caractere com que a casa começa.
`InputOtp::Slot`	`inputmode`	`"numeric"`	O teclado que dispositivos de toque mostram; `"text"` para letras.
`InputOtp::Slot`	`disabled`	`false`	Desabilita: não recebe clique e o teclado o pula.