Class: Shadcn::InputOtpComponent

Inherits:
BaseComponent
  • Object
show all
Defined in:
app/components/shadcn/input_otp_component.rb

Overview

Input OTP component for one-time password entry Matches shadcn/ui Input OTP component

Examples:

Basic 6-digit OTP

<%= render Shadcn::InputOtpComponent.new(length: 6, name: "otp") %>

With groups (3 + 3)

<%= render Shadcn::InputOtpComponent.new(length: 6, name: "otp") do |otp| %>
  <% otp.with_group(slots: 3) %>
  <% otp.with_separator %>
  <% otp.with_group(slots: 3) %>
<% end %>

4-digit PIN

<%= render Shadcn::InputOtpComponent.new(length: 4, name: "pin", pattern: "^[0-9]*$") %>

Disabled

<%= render Shadcn::InputOtpComponent.new(length: 6, name: "otp", disabled: true) %>

Defined Under Namespace

Classes: GroupComponent, OtpSeparatorComponent

Constant Summary collapse

BASE_CLASSES = 
"flex items-center gap-2"
SLOT_CLASSES = 
"relative flex h-10 w-10 items-center justify-center border-y border-r border-input text-sm shadow-sm transition-all first:rounded-l-md first:border-l last:rounded-r-md"
SLOT_ACTIVE_CLASSES = 
"z-10 ring-1 ring-ring"
CARET_CLASSES = 
"pointer-events-none absolute inset-0 flex items-center justify-center"

"animate-caret-blink h-4 w-px bg-foreground duration-1000"

Instance Attribute Summary

Attributes inherited from BaseComponent

#class_name, #data, #html_options

Instance Method Summary collapse

Methods inherited from BaseComponent

#content

Methods included from Rails::Helpers::ClassNameHelper

#cn

Constructor Details

#initialize(length: 6, name: nil, pattern: nil, disabled: false, required: false, autocomplete: "one-time-code", **options) ⇒ InputOtpComponent

Returns a new instance of InputOtpComponent.

Parameters:

  • length (Integer) (defaults to: 6) —

    Number of OTP digits

  • name (String) (defaults to: nil) —

    Input name for form submission

  • pattern (String) (defaults to: nil) —

    Regex pattern for validation (defaults to alphanumeric)

  • disabled (Boolean) (defaults to: false) —

    Whether the input is disabled

  • required (Boolean) (defaults to: false) —

    Whether the input is required

  • autocomplete (String) (defaults to: "one-time-code") —

    Autocomplete attribute (defaults to "one-time-code")



42
43
44
45
46
47
48
49
50
 
# File 'app/components/shadcn/input_otp_component.rb', line 42

def initialize(length: 6, name: nil, pattern: nil, disabled: false, required: false, autocomplete: "one-time-code", **options)
  super(**options)
  @length = length
  @name = name
  @pattern = pattern
  @disabled = disabled
  @required = required
  @autocomplete = autocomplete
end

Instance Method Details

#call ⇒ Object 



52
53
54
55
56
57
58
59
 
# File 'app/components/shadcn/input_otp_component.rb', line 52

def call
  tag.div(**container_attributes) do
    safe_join([
      hidden_input,
      groups.any? ? render_with_groups : render_default_slots
    ])
  end
end