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
<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-10358">
        Password
      </label>
    </div>
    <input type="password" name="password" id="password-10358" placeholder="Enter password" data-midwest-input-target="input" />
  </div>
  <div data-controller="midwest-password-requirements" data-midwest-password-requirements-input-value="[name="password"]" data-midwest-password-requirements-anchored-value="true" data-midwest-password-requirements-anchor-name-value="--pw-req-10368" class="midwest-password-requirements is-anchored" popover="manual" style="position-anchor: --pw-req-10368" 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>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<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 contain:",
    min_length: 8,
    uppercase: 1,
    number: 1,
    special: 1,
    anchored: true
  ) %>
</div>

Anchored

With anchored: true, the requirements panel uses CSS anchor positioning and the Popover API to float beside the password input and appear only when the field is focused.

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

Annotate a preview to embed its Figma design here:

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