Css Zero Showcase
x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!-- Default -->
<input type="text" name="default_input" id="default_input" class="input" inputmode="tel" placeholder="+1 999 999-99-99" data-controller="inputmask" data-maska="+1 ### ###-##-##" />
<!-- Integer -->
<input type="text" name="integer_input" id="integer_input" class="input" inputmode="numeric" placeholder="0" data-controller="inputmask" data-maska-number="true" />
<!-- Decimal -->
<input type="text" name="decimal_input" id="decimal_input" class="input" inputmode="decimal" placeholder="0.00" data-controller="inputmask" data-maska-number-fraction="2" data-maska-number-unsigned="true" />
<!-- Date -->
<input type="text" name="date_input" id="date_input" class="input" inputmode="numeric" placeholder="mm/dd/yyyy" data-controller="inputmask" data-maska="##/##/####" />
<!-- Datetime -->
<input type="text" name="date_time_input" id="date_time_input" class="input" inputmode="numeric" placeholder="mm/dd/yyyy hh:mm" data-controller="inputmask" data-maska="##/##/#### ##:##" />
<!-- Dynamic -->
<input type="text" name="dynamic_input" id="dynamic_input" class="input" inputmode="numeric" placeholder="CPF or CNPJ" data-controller="inputmask" data-maska="['###.###.###-##', '##.###.###/####-##']" />
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<%# Default %>
<%= text_field_tag "default_input", nil, class: "input", inputmode: "tel", placeholder: "+1 999 999-99-99", data: { controller: "inputmask", maska: "+1 ### ###-##-##" } %>
<%# Integer %>
<%= text_field_tag "integer_input", nil, class: "input", inputmode: "numeric", placeholder: "0", data: { controller: "inputmask", maska_number: true } %>
<%# Decimal %>
<%= text_field_tag "decimal_input", nil, class: "input", inputmode: "decimal", placeholder: "0.00", data: { controller: "inputmask", maska_number_fraction: "2", maska_number_unsigned: true } %>
<%# Date %>
<%= text_field_tag "date_input", nil, class: "input", inputmode: "numeric", placeholder: "mm/dd/yyyy", data: { controller: "inputmask", maska: "##/##/####" } %>
<%# Datetime %>
<%= text_field_tag "date_time_input", nil, class: "input", inputmode: "numeric", placeholder: "mm/dd/yyyy hh:mm", data: { controller: "inputmask", maska: "##/##/#### ##:##" } %>
<%# Dynamic %>
<%= text_field_tag "dynamic_input", nil, class: "input", inputmode: "numeric", placeholder: "CPF or CNPJ", data: { controller: "inputmask", maska: "['###.###.###-##', '##.###.###/####-##']" } %>
CSS is not required or multiple files are needed, check the notes.
1
2
3
4
5
6
7
8
9
10
11
12
import { Controller } from "@hotwired/stimulus"
import { MaskInput } from "https://esm.sh/maska@3.0.4?standalone"
export default class extends Controller {
  connect() {
    this.mask = new MaskInput(this.element)
  }
  disconnect() {
    this.mask.destroy()
  }
}

Dependencies