Midwest Component Library v0.28.2

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
<form>
  <div class="midwest-grid has-columns" style="--grid-width: 200px; --grid-gap: 2rem; --grid-columns: 2">
    <div>
      <div data-controller="midwest-address" data-midwest-address-provider-value="mapkit" data-midwest-address-map-provider-value="mapkit" data-midwest-address-show-map-value="true" class="midwest-address" style="anchor-name: --addr-df80">
        <div class="midwest-input midwest-form-group type-text" data-controller="midwest-input">
          <div class="midwest-form-group__top">
            <label class="midwest-label " for="address-df88">
              Address
            </label>
          </div>
          <input type="text" name="address" id="address-df88" autocomplete="off" spellcheck="false" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-haspopup="listbox" aria-controls="addr-df80-dropdown" placeholder="Search for an address…" data-midwest-input-target="input" data-midwest-address-target="input" data-action="input->midwest-address#search keydown->midwest-address#navigate" />
        </div>
        <div id="addr-df80-dropdown" popover="manual" style="position-anchor: --addr-df80; anchor-name: --addr-df80-dropdown" role="listbox" aria-label="Address suggestions" data-controller="midwest-popover" data-midwest-address-target="dropdown" class="midwest-motion motion-scale motion-blur from-up trigger-hover midwest-popover anchored midwest-address__dropdown">
          <ul class="midwest-address__suggestions"
        data-midwest-address-target="suggestions">
          </ul>
        </div>
        <input type="hidden"
           name="_latitude"
           value=""
           data-midwest-address-target="latInput">
        <input type="hidden"
           name="_longitude"
           value=""
           data-midwest-address-target="lngInput">
        <input type="hidden"
           name="_place_id"
           value=""
           data-midwest-address-target="placeIdInput">
        <div class="midwest-address__map"
         style="--address-map-height: 280px"
         hidden
         aria-hidden="true"
         data-midwest-address-target="mapContainer">
        </div>
      </div>
    </div>
    <div>
      <article data-controller="midwest-card" class="midwest-card">
        <div class="wrap">
          <header>
            <h4>Summary</h4>
          </header>
          <section>          
            <div class="midwest-form-live-summary-container">
              <div data-controller="midwest-form-live-summary" class="midwest-form-live-summary">
                <div data-midwest-form-live-summary-target="list" aria-live="polite"></div>
              </div>
            </div>
          </section>
        </div>
      </article>
    </div>
  </div>
</form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<form>
  <%= midwest_grid(columns: 2, gap: 2) do %>
    <div>
      <%= midwest_form_address(
        name: :address,
        label: "Address",
        placeholder: "Search for an address…",
        show_map: true,
        map_height: 280
      ) %>
    </div>
    <div>
      <%= midwest_card do |card| %>
        <% card.with_header { tag.h4("Summary") } %>
        <% card.with_section do %>
          <%= midwest_form_live_summary %>
        <% end %>
      <% end %>
    </div>
  <% end %>
</form>

With map preview

Pass show_map: true to reveal a mini-map below the field after the user selects a place. The live summary updates immediately on selection; hover the address row to see the resolved lat/lng and place ID.

No params configured.

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

Accessibility

Figma embed for Address/with_map

Annotate a preview to embed its Figma design here:

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