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="p-8 max-w-sm flex flex-col gap-4">
  <div class="midwest-input midwest-form-group type-number has-prefix" data-controller="midwest-input">
    <div class="midwest-form-group__top">
      <label class="midwest-label " for="price-12648">
        Price
      </label>
    </div>
    <div class="midwest-input-addon-wrapper">
      <span class="midwest-input-addon midwest-input-addon--prefix" aria-hidden="true">
        $
      </span>
      <input type="number" name="price" id="price-12648" placeholder="0.00" data-midwest-input-target="input" />
    </div>
  </div>
  <div class="midwest-input midwest-form-group type-text has-suffix" data-controller="midwest-input">
    <div class="midwest-form-group__top">
      <label class="midwest-label " for="domain-12650">
        Subdomain
      </label>
    </div>
    <div class="midwest-input-addon-wrapper">
      <input type="text" name="domain" id="domain-12650" placeholder="your-app" data-midwest-input-target="input" />
      <span class="midwest-input-addon midwest-input-addon--suffix" aria-hidden="true">
        .example.com
      </span>
    </div>
  </div>
  <div class="midwest-input midwest-form-group type-text has-prefix" data-controller="midwest-input">
    <div class="midwest-form-group__top">
      <label class="midwest-label " for="query-12658">
        Search
      </label>
    </div>
    <div class="midwest-input-addon-wrapper">
      <span class="midwest-input-addon midwest-input-addon--prefix" aria-hidden="true">
        <div class="midwest-icon ">
          <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="Search"><title>Search</title>
              <path d="M456.69 421.39L362.6 327.3a173.81 173.81 0 0034.84-104.58C397.44 126.38 319.06 48 222.72 48S48 126.38 48 222.72s78.38 174.72 174.72 174.72A173.81 173.81 0 00327.3 362.6l94.09 94.09a25 25 0 0035.3-35.3zM97.92 222.72a124.8 124.8 0 11124.8 124.8 124.95 124.95 0 01-124.8-124.8z"></path></svg>
          </div>
        </div>
      </span>
      <input type="text" name="query" id="query-12658" placeholder="Search…" data-midwest-input-target="input" />
    </div>
  </div>
  <div class="midwest-input midwest-form-group type-text has-prefix has-suffix" data-controller="midwest-input">
    <div class="midwest-form-group__top">
      <label class="midwest-label " for="subdomain-12660">
        Full URL
      </label>
    </div>
    <div class="midwest-input-addon-wrapper">
      <span class="midwest-input-addon midwest-input-addon--prefix" aria-hidden="true">
        https://
      </span>
      <input type="text" name="subdomain" id="subdomain-12660" placeholder="your-app" data-midwest-input-target="input" />
      <span class="midwest-input-addon midwest-input-addon--suffix" aria-hidden="true">
        .com
      </span>
    </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: :price, label: "Price", type: :number, prefix: "$", placeholder: "0.00") %>
  <%= midwest_form_input(name: :domain, label: "Subdomain", suffix: ".example.com", placeholder: "your-app") %>
  <%= midwest_form_input(name: :query, label: "Search", prefix_icon: :search, placeholder: "Search…") %>
  <%= midwest_form_input(name: :subdomain, label: "Full URL", prefix: "https://", suffix: ".com", placeholder: "your-app") %>
</div>

Addons

Prefix and suffix addons render inside the input border — ideal for currency symbols, units, URL parts, or search icons.

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

Annotate a preview to embed its Figma design here:

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