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
<div class="p-8 max-w-sm">
  <form class="flex flex-col gap-4" onsubmit="event.preventDefault()">
    <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-11dd8">
          Password
        </label>
      </div>
      <input type="password" name="password" id="password-11dd8" placeholder="Enter password" data-midwest-input-target="input" />
    </div>
    <div class="midwest-input midwest-form-group type-password" data-controller="midwest-input" data-midwest-input-match-value="[name="password"]">
      <div class="midwest-form-group__top">
        <label class="midwest-label " for="password_confirmation-11de0">
          Confirm password
        </label>
      </div>
      <input type="password" name="password_confirmation" id="password_confirmation-11de0" placeholder="Re-enter password" data-midwest-input-target="input" />
      <div class="midwest-form-group__bottom theme-red" data-midwest-input-target="matchError" hidden aria-live="polite">
        <span class="midwest-label description error">
          <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" role="img" aria-label="Warning"><title>Warning</title>
                <path d="M449.07 399.08L278.64 82.58c-12.08-22.44-44.26-22.44-56.35 0L51.87 399.08A32 32 0 0080 446.25h340.89a32 32 0 0028.18-47.17zm-198.6-1.83a20 20 0 1120-20 20 20 0 01-20 20zm21.72-201.15l-5.74 122a16 16 0 01-32 0l-5.74-121.95a21.73 21.73 0 0121.5-22.69h.21a21.74 21.74 0 0121.73 22.7z"></path></svg>
            </div>
          </div>
          Values do not match
        </span>
      </div>
      <div class="midwest-form-group__bottom ">
        <span class="midwest-label description">
          Must match the password above
        </span>
      </div>
    </div>
    <button type="submit" class="midwest-button variant-primary">Create account</button>
  </form>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="p-8 max-w-sm">
  <form class="flex flex-col gap-4" onsubmit="event.preventDefault()">
    <%= midwest_form_input(name: :password, label: "Password", type: :password,
        placeholder: "Enter password") %>
    <%= midwest_form_input(name: :password_confirmation, label: "Confirm password", type: :password,
        placeholder: "Re-enter password",
        match: '[name="password"]',
        description: "Must match the password above") %>
    <button type="submit" class="midwest-button variant-primary">Create account</button>
  </form>
</div>

Match Validation

Pass match: with a CSS selector to require that this field's value matches the referenced field. Uses native setCustomValidity so the browser surfaces a mismatch error on form submission. The primary use case is password-confirmation inputs.

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

Annotate a preview to embed its Figma design here:

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