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
<div class="flex flex-col gap-6 p-16 max-w-md mx-auto">
  <div class="midwest-input midwest-form-group type-email" data-controller="midwest-input" data-midwest-input-validate-value="true">
    <div class="midwest-form-group__top">
      <label class="midwest-label " for="email-11878">
        Email address<span class="theme-red text-theme-6">*</span>
      </label>
    </div>
    <input type="email" name="email" id="email-11878" placeholder="you@example.com" data-midwest-input-target="input" />
    <div class="midwest-form-group__bottom theme-red" data-midwest-input-target="validationError" 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>
        <span data-midwest-input-target="validationMessage"></span>
      </span>
    </div>
  </div>
  <div class="midwest-input midwest-form-group type-url" data-controller="midwest-input" data-midwest-input-validate-value="true">
    <div class="midwest-form-group__top">
      <label class="midwest-label " for="website-11880">
        Website URL
      </label>
    </div>
    <input type="url" name="website" id="website-11880" placeholder="https://example.com" data-midwest-input-target="input" />
    <div class="midwest-form-group__bottom theme-red" data-midwest-input-target="validationError" 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>
        <span data-midwest-input-target="validationMessage"></span>
      </span>
    </div>
  </div>
  <div class="midwest-input midwest-form-group type-text" data-controller="midwest-input" data-midwest-input-validate-value="true">
    <div class="midwest-form-group__top">
      <label class="midwest-label " for="username-11888">
        Username<span class="theme-red text-theme-6">*</span>
      </label>
    </div>
    <input type="text" name="username" id="username-11888" minlength="3" placeholder="3-20 characters" maxlength="20" data-midwest-input-target="input" />
    <div class="midwest-input-counter">
      <span data-midwest-input-target="counter">0</span>/20
    </div>
    <div class="midwest-form-group__bottom theme-red" data-midwest-input-target="validationError" 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>
        <span data-midwest-input-target="validationMessage"></span>
      </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
<div class="flex flex-col gap-6 p-16 max-w-md mx-auto">
  <%= render Midwest::Form::InputComponent.new(
    name: "email",
    type: :email,
    label: "Email address",
    placeholder: "you@example.com",
    required: true,
    validate: true
  ) %>
  <%= render Midwest::Form::InputComponent.new(
    name: "website",
    type: :url,
    label: "Website URL",
    placeholder: "https://example.com",
    validate: true
  ) %>
  <%= render Midwest::Form::InputComponent.new(
    name: "username",
    type: :text,
    label: "Username",
    placeholder: "3-20 characters",
    required: true,
    validate: true,
    minlength: 3,
    maxlength: 20
  ) %>
</div>

Inline Validation

Pass validate: true to enable Shopify-style inline validation. Fields are validated on blur using the HTML5 Constraint Validation API. Errors appear inline after the user interacts with the field, and clear as soon as the input becomes valid.

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

Annotate a preview to embed its Figma design here:

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