Shadwire
Componentes

Input OTP

Campo de código de uso único: slots de um caractere com avanço, backspace e colagem.

Instalação

O Shadwire segue o modelo open-code do shadcn/ui: o código-fonte do componente é copiado para a sua aplicação 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: 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 slots 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 %>