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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<div class="p-8 max-w-sm">
  <form data-controller="midwest-form" action="#" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="wyZ3chn2s9dYpCii49FH5Mvul0xOU7npKAXGDHGoS0XTFrUp29rrnlrxpptjl3CqIGTZeTpWIZhdCrotBqePQA" autocomplete="off" />
    <div class="flex flex-col gap-4">
      <div class="midwest-input midwest-form-group type-password" data-controller="midwest-input">
        <div class="midwest-form-group__top">
          <label class="midwest-label " for="password-13498">
            Password
          </label>
        </div>
        <input id="password-13498" data-midwest-input-target="input" type="password" name="password" />
      </div>
      <div data-controller="midwest-password-requirements" data-midwest-password-requirements-input-value="[name="password"]" class="midwest-password-requirements" aria-live="polite">
        <p class="midwest-password-requirements-heading">Password must contain:</p>
        <ul role="list" class="midwest-password-requirements-list" data-midwest-password-requirements-target="list">
          <li class="midwest-password-requirements-item"
          data-midwest-password-requirements-target="requirement"
          data-requirement-type="min_length"
          data-requirement-count="8">
            <span class="requirement-icon">
              <span class="icon-unmet">
                <div class="midwest-icon " aria-hidden="true">
                  <div class="midwest-icon-inner">
                    <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" aria-hidden="true"><circle cx="256" cy="256" r="192" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></circle></svg>
                  </div>
                </div>
              </span>
              <span class="icon-met">
                <div class="midwest-icon " aria-hidden="true">
                  <div class="midwest-icon-inner">
                    <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" aria-hidden="true"><path d="M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32"></path><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M352 176L217.6 336 160 272"></path></svg>
                  </div>
                </div>
              </span>
            </span>
            <span class="requirement-label">At least 8 characters</span>
          </li>
          <li class="midwest-password-requirements-item"
          data-midwest-password-requirements-target="requirement"
          data-requirement-type="uppercase"
          data-requirement-count="1">
            <span class="requirement-icon">
              <span class="icon-unmet">
                <div class="midwest-icon " aria-hidden="true">
                  <div class="midwest-icon-inner">
                    <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" aria-hidden="true"><circle cx="256" cy="256" r="192" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></circle></svg>
                  </div>
                </div>
              </span>
              <span class="icon-met">
                <div class="midwest-icon " aria-hidden="true">
                  <div class="midwest-icon-inner">
                    <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" aria-hidden="true"><path d="M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32"></path><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M352 176L217.6 336 160 272"></path></svg>
                  </div>
                </div>
              </span>
            </span>
            <span class="requirement-label">One uppercase letter</span>
          </li>
          <li class="midwest-password-requirements-item"
          data-midwest-password-requirements-target="requirement"
          data-requirement-type="number"
          data-requirement-count="1">
            <span class="requirement-icon">
              <span class="icon-unmet">
                <div class="midwest-icon " aria-hidden="true">
                  <div class="midwest-icon-inner">
                    <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" aria-hidden="true"><circle cx="256" cy="256" r="192" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></circle></svg>
                  </div>
                </div>
              </span>
              <span class="icon-met">
                <div class="midwest-icon " aria-hidden="true">
                  <div class="midwest-icon-inner">
                    <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" aria-hidden="true"><path d="M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32"></path><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M352 176L217.6 336 160 272"></path></svg>
                  </div>
                </div>
              </span>
            </span>
            <span class="requirement-label">One number</span>
          </li>
          <li class="midwest-password-requirements-item"
          data-midwest-password-requirements-target="requirement"
          data-requirement-type="special"
          data-requirement-count="1">
            <span class="requirement-icon">
              <span class="icon-unmet">
                <div class="midwest-icon " aria-hidden="true">
                  <div class="midwest-icon-inner">
                    <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" aria-hidden="true"><circle cx="256" cy="256" r="192" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></circle></svg>
                  </div>
                </div>
              </span>
              <span class="icon-met">
                <div class="midwest-icon " aria-hidden="true">
                  <div class="midwest-icon-inner">
                    <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" aria-hidden="true"><path d="M448 256c0-106-86-192-192-192S64 150 64 256s86 192 192 192 192-86 192-192z" fill="none" stroke="currentColor" stroke-miterlimit="10" stroke-width="32"></path><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M352 176L217.6 336 160 272"></path></svg>
                  </div>
                </div>
              </span>
            </span>
            <span class="requirement-label">One special character</span>
          </li>
        </ul>
        <div class="midwest-password-requirements-complete" data-midwest-password-requirements-target="complete" hidden>
          <span class="requirement-icon">
            <div class="midwest-icon " aria-hidden="true">
              <div class="midwest-icon-inner">
                <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" aria-hidden="true"><path d="M256 48C141.31 48 48 141.31 48 256s93.31 208 208 208 208-93.31 208-208S370.69 48 256 48zm108.25 138.29l-134.4 160a16 16 0 01-12 5.71h-.27a16 16 0 01-11.89-5.3l-57.6-64a16 16 0 1123.78-21.4l45.29 50.32 122.59-145.91a16 16 0 0124.5 20.58z"></path></svg>
              </div>
            </div>
          </span>
          <span class="requirement-label">Nailed it!</span>
        </div>
      </div>
      <div class="midwest-input midwest-form-group type-password" data-controller="midwest-input" data-midwest-input-match-value="[name="password"]">
        <div class="midwest-form-group__top">
          <label class="midwest-label " for="password_confirmation-134a0">
            Confirm password
          </label>
        </div>
        <input id="password_confirmation-134a0" data-midwest-input-target="input" type="password" name="password_confirmation" />
        <div class="midwest-form-group__bottom theme-red" data-midwest-input-target="matchError" hidden aria-live="polite">
          <span class="midwest-label description error">
            <div class="midwest-icon " aria-hidden="true">
              <div class="midwest-icon-inner">
                <svg xmlns="http://www.w3.org/2000/svg" class="Midwest-Icon__Svg" viewbox="0 0 512 512" focusable="false" role="img" aria-label="Warning"><title>Warning</title>
                  <path d="M449.07 399.08L278.64 82.58c-12.08-22.44-44.26-22.44-56.35 0L51.87 399.08A32 32 0 0080 446.25h340.89a32 32 0 0028.18-47.17zm-198.6-1.83a20 20 0 1120-20 20 20 0 01-20 20zm21.72-201.15l-5.74 122a16 16 0 01-32 0l-5.74-121.95a21.73 21.73 0 0121.5-22.69h.21a21.74 21.74 0 0121.73 22.7z"></path></svg>
              </div>
            </div>
            Values do not match
          </span>
        </div>
      </div>
    </div>
  </form>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<div class="p-8 max-w-sm">
  <%= midwest_form_with url: "#", method: :post do |f| %>
    <div class="flex flex-col gap-4">
      <%= f.password_field :password, label: "Password", placeholder: "Enter password" %>
      <%= f.password_requirements :password,
          heading: "Password must contain:",
          min_length: 8,
          uppercase: 1,
          number: 1,
          special: 1 %>
      <%= f.password_field :password_confirmation, label: "Confirm password",
          placeholder: "Re-enter password",
          match: '[name="password"]' %>
    </div>
  <% end %>
</div>

Form Builder

Inside a midwest_form_with block, use f.password_requirements(:password) to automatically derive the input: selector from the form's field name.

No params configured.

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

Accessibility

Figma embed for Password Requirements/with_form_builder

Annotate a preview to embed its Figma design here:

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