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
137
<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-ed90">
        Password
      </label>
    </div>
    <input type="password" name="password" id="password-ed90" 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-inline-value="true" data-midwest-password-requirements-inline-anchor-name-value="--pw-inline-eda0">
    <div class="midwest-password-requirements-inline"
         data-midwest-password-requirements-target="inline"
         style="position-anchor: --pw-inline-eda0">
      <div class="midwest-progress-bar size-xs variant-circular theme-primary">
        <div class="progress-circular-wrapper">
          <div class="progress-circular-rotator">
            <svg class="progress-circular-svg" width="24" height="24" viewBox="0 0 24 24" role="progressbar" aria-label="Password strength" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
              <circle class="progress-circular-track"
                  r="10.5"
                  cx="12.0"
                  cy="12.0"
                  stroke-width="3"></circle>
              <circle class="progress-circular-fill"
                  r="10.5"
                  cx="12.0"
                  cy="12.0"
                  stroke-width="3"
                  stroke-dasharray="65.973"
                  stroke-dashoffset="65.973"></circle>
            </svg>      </div>
        </div>
      </div>
    </div>
    <div class="midwest-password-requirements is-inline" data-midwest-password-requirements-target="panel" aria-live="polite">
      <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>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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"]',
    min_length: 8,
    uppercase: 1,
    number: 1,
    special: 1,
    inline: true
  ) %>
</div>

Inline

With inline: true, a small circular progress indicator is anchor-positioned inside the password input. It updates in real-time via a Stimulus outlet connection to the progress bar component.

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

Annotate a preview to embed its Figma design here:

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