Module: BetterUi::General::Components::Input::Pin::PinHelper

Included in:
ApplicationHelper
Defined in:
app/helpers/better_ui/general/components/input/pin/pin_helper.rb

Instance Method Summary collapse

Instance Method Details

#bui_input_pin(name:, value: '', length: 6, placeholder: '•', required: false, disabled: false, theme: :default, size: :medium, form: nil, classes: '', **options) ⇒ String

Renderizza un componente Pin/OTP Input per inserimento codici di verifica numerici.

Examples:

Uso base per codice OTP

<%= bui_input_pin(name: 'verification_code') %>

Con lunghezza personalizzata e tema

<%= bui_input_pin(name: 'pin_code', length: 4, theme: :blue, size: :large) %>

Con Rails form builder

<%= form_with model: @user do |form| %>
  <%= bui_input_pin(name: :otp_code, form: form, value: @user.otp_code) %>
<% end %>

Con validazione e attributi personalizzati

<%= bui_input_pin(
      name: 'sms_code',
      length: 6,
      required: true,
      placeholder: '_',
      theme: :green,
      classes: 'my-custom-class',
      id: 'sms-verification'
    ) %>

Per codice bancario a 8 cifre

<%= bui_input_pin(
      name: 'bank_code',
      length: 8,
      theme: :violet,
      size: :small,
      placeholder: '0'
    ) %>

Parameters:

  • name (String) —

    Nome del campo pin (obbligatorio)

  • value (String) (defaults to: '') —

    Valore del pin preimpostato

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

    Numero di campi pin (4-8, default: 6)

  • placeholder (String) (defaults to: '•') —

    Placeholder per campi vuoti (default: ‘•’)

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

    Se il campo è obbligatorio

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

    Se il campo è disabilitato

  • theme (Symbol) (defaults to: :default) —

    Tema del componente (:default, :white, :red, :rose, :orange, :green, :blue, :yellow, :violet)

  • size (Symbol) (defaults to: :medium) —

    Dimensione del componente (:small, :medium, :large)

  • form (ActionView::Helpers::FormBuilder, nil) (defaults to: nil) —

    Form builder Rails opzionale

  • classes (String) (defaults to: '') —

    Classi CSS aggiuntive

  • options (Hash) —

    Opzioni aggiuntive per attributi HTML

Returns:

  • (String) —

    HTML del componente Pin renderizzato



55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
 
# File 'app/helpers/better_ui/general/components/input/pin/pin_helper.rb', line 55

def bui_input_pin(name:, value: '', length: 6, placeholder: '•', required: false, disabled: false,
                  theme: :default, size: :medium, form: nil, classes: '', **options)
  render BetterUi::General::Input::Pin::Component.new(
    name: name,
    value: value,
    length: length,
    placeholder: placeholder,
    required: required,
    disabled: disabled,
    theme: theme,
    size: size,
    form: form,
    classes: classes,
    **options
  )
end