MaskedInput
Displays a form input field with applied mask.
Usage
For advanced usage, check out the Maska website.
Phone number
div(class: 'grid w-full max-w-sm items-center gap-1.5') do MaskedInput(data: {maska: "(##) #####-####"}) end
Copied!
Copy failed!
Hex color code
div(class: 'grid w-full max-w-sm items-center gap-1.5') do MaskedInput(data: {maska: "!#HHHHHH", maska_tokens: "H:[0-9a-fA-F]"}) end
Copied!
Copy failed!
Cpf / cnpj
div(class: 'grid w-full max-w-sm items-center gap-1.5') do MaskedInput(data: {maska: "['###.###.###-##', '##.###.###/####-##']"}) end
Copied!
Copy failed!
Installation
Using RubyUI CLI
Run the install command
rails g ruby_ui:component MaskedInput
Copied!
Copy failed!
Manual installation
1
Add RubyUI::MaskedInput
to app/components/ruby_ui/masked_input.rb
# frozen_string_literal: true module RubyUI class MaskedInput < Base def view_template Input(type: "text", **attrs) end private def default_attrs {data: {controller: "ruby-ui--masked-input"}} end end end
Copied!
Copy failed!
2
Add masked_input_controller.js
to app/javascript/controllers/ruby_ui/masked_input_controller.js
import { Controller } from "@hotwired/stimulus"; import { MaskInput } from "maska"; // Connects to data-controller="ruby-ui--masked-input" export default class extends Controller { connect() { new MaskInput(this.element) } }
Copied!
Copy failed!
3
Update the Stimulus controllers manifest file
Importmap!
You don't need to run this command if you are using Importmap
rake stimulus:manifest:update
Copied!
Copy failed!
4
Install maska
Javascript dependency
// with yarn yarn add maska // with npm npm install maska // with importmaps bin/importmap pin maska
Copied!
Copy failed!
5
Install required components
Component MaskedInput
relies on the following RubyUI components. Refer to their individual installation guides for setup instructions:
Components
Component | Built using | Source |
---|---|---|
MaskedInput | Phlex | |
MaskedInputController | Stimulus JS |