Input OTP

A one-time code field: single-character slots with advance, backspace and paste.

Installation

Shadwire follows shadcn/ui's open code model: the component's source is copied into your application and becomes yours. Install it with the CLI:

shadwire add input-otp --yes

The input-otp registry item installs these files:

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

This component uses Stimulus, so the application needs importmap-rails and stimulus-rails with automatic controller loading.

Haven't installed the CLI yet? gem install shadwire, then shadwire init.

Usage

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

Examples

Default

Two groups of three slots separated by a dash.

<%= 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 %>

API reference

Every part accepts class / class_name and **attrs.

Component	Argument	Default	Description
`InputOtp`	`name`	`nil`	The name of the hidden input that submits the whole code.
`InputOtp`	`value`	`nil`	A code to start with.
`InputOtp::Slot`	`value`	`nil`	The character the slot starts with.
`InputOtp::Slot`	`inputmode`	`"numeric"`	The keyboard touch devices show; `"text"` for letters.
`InputOtp::Slot`	`disabled`	`false`	Disables it: not clickable, and skipped by the keyboard.