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
<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-e9c0">
        Password
      </label>
    </div>
    <input type="password" name="password" id="password-e9c0" placeholder="Enter password" data-midwest-input-target="input" />
    <div class="midwest-input-capslock-warning" data-midwest-input-target="capsLockWarning" hidden aria-live="polite">
      ⇪ Caps Lock is on
    </div>
  </div>
  <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_confirmation-e9c8">
        Confirm password
      </label>
    </div>
    <input type="password" name="password_confirmation" id="password_confirmation-e9c8" placeholder="Confirm password" data-midwest-input-target="input" />
    <div class="midwest-input-capslock-warning" data-midwest-input-target="capsLockWarning" hidden aria-live="polite">
      ⇪ Caps Lock is on
    </div>
  </div>
</div>
1
2
3
4
5
6
<div class="p-8 max-w-sm flex flex-col gap-4">
  <%= midwest_form_input(name: :password, label: "Password", type: :password,
      placeholder: "Enter password", show_caps_lock: true) %>
  <%= midwest_form_input(name: :password_confirmation, label: "Confirm password", type: :password,
      placeholder: "Confirm password", show_caps_lock: true) %>
</div>

Password Caps Lock

Pass show_caps_lock: true on a type: :password input to display a visible warning when the user's Caps Lock key is active. The warning is hidden until a keyup event confirms the modifier state.

No params configured.

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

Accessibility

Figma embed for Input/password_caps_lock

Annotate a preview to embed its Figma design here:

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