Components / Masked Input

Masked Input

Stable Stimulus: senren--masked-input

phone

Usage example #

Copy this ERB into a Rails view after installing the component. The snippet below is the same code used by the live preview above.

app/views/.../masked_input_example.html.erb

<div class="w-full max-w-sm text-left">
  <%= render Senren::MaskedInputComponent.new(mask: "9999 9999 9999 9999", name: "card_number", placeholder: "4242 4242 4242 4242") %>
</div>

Install this component #

Copy the official component into your app

This component requires Stimulus. Keep --client so the controller is copied with the ViewComponent.

Terminal

bin/rails senren:add masked_input --client

Create a custom component with the same conventions

Use this when you need an app-specific component that follows Senren's ViewComponent and Stimulus structure. --client is required for this behavior.

Terminal

bin/rails generate senren:component masked_input --client

Dependencies are resolved by senren:add: input, label.

At a glance #

Category Forms

Class name Senren::MaskedInputComponent

Stimulus senren--masked-input

Variants default, error

Depends on input, label

Pairs with form, label

Source #

app/components/senren/masked_input_component.html.erb

<%= render(Senren::InputComponent.new(**input_args)) { content } %>

app/components/senren/masked_input_component.rb

# frozen_string_literal: true

module Senren
  class MaskedInputComponent < BaseComponent
    VARIANTS = InputComponent::VARIANTS
    SIZES    = InputComponent::SIZES

    def initialize(mask:, **args)
      @mask = mask
      @args = args
    end

    def input_args
      data = (@args[:data] || {}).merge(controller: 'senren--masked-input', 'senren--masked-input-mask-value': @mask)
      @args.merge(data: data)
    end
  end
end

AI agent rules #

Use for

+phone
+postal code
+credit card
+custom formats

Avoid

-free text fields - use input

Accessibility #

Always include a description of expected format.

Switch

Dialog