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
<div class="p-8 max-w-sm 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-10378">
        Password
      </label>
    </div>
    <input type="password" name="password" id="password-10378" placeholder="Enter password" data-midwest-input-target="input" />
  </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:</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="10">
        <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 10 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="lowercase"
          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 lowercase letter</span>
      </li>
      <li class="midwest-password-requirements-item"
          data-midwest-password-requirements-target="requirement"
          data-requirement-type="pattern"
          data-requirement-pattern="^\S+$">
        <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">Contain no spaces</span>
      </li>
      <li class="midwest-password-requirements-item"
          data-midwest-password-requirements-target="requirement"
          data-requirement-type="pattern"
          data-requirement-pattern="^[^0-9]">
        <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">Not start with a number</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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<div class="p-8 max-w-sm flex flex-col gap-4">
  <%= midwest_form_input(
    name: :password,
    label: "Password",
    type: :password,
    placeholder: "Enter password"
  ) %>
  <%= midwest_password_requirements(
    input: '[name="password"]',
    heading: "Password must:",
    min_length: 10,
    uppercase: 1,
    lowercase: 1
  ) do |c| %>
    <% c.with_requirement("Contain no spaces", pattern: '^\S+$') %>
    <% c.with_requirement("Not start with a number", pattern: '^[^0-9]') %>
  <% end %>
</div>

Custom Requirements

Use the with_requirement slot to add custom regex-based rules alongside the built-in requirement options.

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/custom_requirements

Annotate a preview to embed its Figma design here:

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