Midwest Component Library v0.24.0

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<div class="p-8 max-w-sm flex flex-col gap-4">
  <div class="midwest-input midwest-form-group type-tel" data-controller="midwest-input" data-midwest-input-autoformat-value="phone">
    <div class="midwest-form-group__top">
      <label class="midwest-label " for="phone-e510">
        Phone number
      </label>
    </div>
    <input type="tel" name="phone" id="phone-e510" placeholder="5555555555" data-midwest-input-target="input" />
    <div class="midwest-form-group__bottom ">
      <span class="midwest-label description">
        Tab out to format automatically
      </span>
    </div>
  </div>
  <div class="midwest-input midwest-form-group type-text" data-controller="midwest-input" data-midwest-input-autoformat-value="credit_card">
    <div class="midwest-form-group__top">
      <label class="midwest-label " for="card_number-e518">
        Card number
      </label>
    </div>
    <input type="text" name="card_number" id="card_number-e518" placeholder="1234567890123456" data-midwest-input-target="input" />
  </div>
  <div class="midwest-input midwest-form-group type-text" data-controller="midwest-input" data-midwest-input-autoformat-value="zip">
    <div class="midwest-form-group__top">
      <label class="midwest-label " for="zip_code-e520">
        ZIP code
      </label>
    </div>
    <input type="text" name="zip_code" id="zip_code-e520" placeholder="123456789" data-midwest-input-target="input" />
  </div>
  <div class="midwest-input midwest-form-group type-tel" data-controller="midwest-input" data-midwest-input-autoformat-value="phone">
    <div class="midwest-form-group__top">
      <label class="midwest-label " for="formatted_phone-e528">
        Pre-formatted phone
      </label>
    </div>
    <input type="tel" name="formatted_phone" id="formatted_phone-e528" value="(555) 123-4567" data-midwest-input-target="input" />
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<div class="p-8 max-w-sm flex flex-col gap-4">
  <%# Phone — formats to (XXX) XXX-XXXX on blur %>
  <%= midwest_form_input(name: :phone, label: "Phone number", type: :tel,
      placeholder: "5555555555", autoformat: :phone,
      description: "Tab out to format automatically") %>
  <%# Credit card — formats to XXXX XXXX XXXX XXXX on blur %>
  <%= midwest_form_input(name: :card_number, label: "Card number", type: :text,
      placeholder: "1234567890123456", autoformat: :credit_card) %>
  <%# ZIP — formats to XXXXX-XXXX on blur when 9 digits are entered %>
  <%= midwest_form_input(name: :zip_code, label: "ZIP code", type: :text,
      placeholder: "123456789", autoformat: :zip) %>
  <%# formatter: proc applies to the initial server-rendered value %>
  <%= midwest_form_input(name: :formatted_phone, label: "Pre-formatted phone", type: :tel,
      value: "5551234567", autoformat: :phone,
      formatter: ->(v) {
        d = v.to_s.gsub(/\D/, '').slice(0, 10)
        "(#{d[0,3]}) #{d[3,3]}-#{d[6,4]}"
      }) %>
</div>

Autoformat

Pass autoformat: with a named formatter (:phone, :credit_card, :zip) to reformat the raw value on blur. Combine with formatter: (a Ruby proc) to also format the initial server-rendered value.

No params configured.

No assets to display.
Add a .js or .css file alongside the component to see it here.

Accessibility

Figma embed for Input/autoformat

Annotate a preview to embed its Figma design here:

@figma "https://figma.com/..."