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
<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-fde8">
        Password
      </label>
    </div>
    <input type="password" name="password" id="password-fde8" 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">
    <div class="midwest-password-requirements-strength" data-midwest-password-requirements-target="strength">
      <div class="midwest-progress-bar size-sm variant-default animated theme-primary midwest-password-requirements-meter">
        <div class="progress-track" role="progressbar" aria-label="Password strength" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
          <div class="progress-fill" style="width: 0.0%"></div>
        </div>
      </div>
      <span class="midwest-password-requirements-strength-label" data-midwest-password-requirements-target="strengthLabel"></span>
    </div>
    <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
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<%
  heading = params[:heading].presence
  min_length = (params[:min_length] || 8).to_i
  uppercase = (params[:uppercase] || 1).to_i
  lowercase = (params[:lowercase] || 0).to_i
  number_req = (params[:number] || 1).to_i
  special = (params[:special] || 1).to_i
  complete_message = params[:complete_message].presence || 'Nailed it!'
  strength = params.fetch(:strength, true) == true
  inline_indicator = params[:inline] == true
  anchored = params[:anchored] == true
%>
<div class="p-8 max-w-sm flex flex-col gap-4">
  <%= midwest_form_input(
    name: :password,
    label: "Password",
    type: :password,
    placeholder: "Enter password"
  ) %>
  <% opts = {
    input: '[name="password"]',
    heading: heading,
    complete_message: complete_message,
    strength: strength,
    inline: inline_indicator,
    anchored: anchored
  } %>
  <% opts[:min_length] = min_length if min_length > 0 %>
  <% opts[:uppercase] = uppercase if uppercase > 0 %>
  <% opts[:lowercase] = lowercase if lowercase > 0 %>
  <% opts[:number] = number_req if number_req > 0 %>
  <% opts[:special] = special if special > 0 %>
  <%= midwest_password_requirements(**opts) %>
</div>

Playground

Explore the component with live parameters.

Param Description Input

Optional heading text above the requirements list

Minimum password length (0 to disable)

Required uppercase letters (0 to disable)

Required lowercase letters (0 to disable)

Required digits (0 to disable)

Required special characters (0 to disable)

Message shown when all requirements are met

Show a progress bar indicating password strength

Show a circular strength indicator inside the password input

Float the panel next to the input using anchor positioning

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

Accessibility

Figma embed for Password Requirements/playground

Annotate a preview to embed its Figma design here:

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