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
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<form data-controller="midwest-form" action="#" accept-charset="UTF-8" method="get"> <div class="midwest-grid has-columns" style="--grid-width: 200px; --grid-gap: 2rem; --grid-columns: 2"> <div class="flex flex-col gap-4"> <fieldset class="midwest-form-field-group theme-primary"> <legend class="field-group-legend"> <span class="midwest-badge size-default theme-primary"> <span class="value">Personal info</span> </span> </legend> <div class="field-group-fields"> <div class="midwest-grid" style="--grid-width: 200px; --grid-gap: 1rem"> <div class="midwest-input midwest-form-group type-text" data-controller="midwest-input"> <div class="midwest-form-group__top"> <label class="midwest-label " for="first_name-cfd0"> First name </label> </div> <input id="first_name-cfd0" data-midwest-input-target="input" type="text" name="first_name" /> </div> <div class="midwest-input midwest-form-group type-text" data-controller="midwest-input"> <div class="midwest-form-group__top"> <label class="midwest-label " for="last_name-cfd8"> Last name </label> </div> <input id="last_name-cfd8" data-midwest-input-target="input" type="text" name="last_name" /> </div> </div> </div> </fieldset> <fieldset class="midwest-form-field-group theme-primary"> <legend class="field-group-legend"> <span class="midwest-badge size-default theme-primary"> <span class="value">Location</span> </span> </legend> <div class="field-group-fields"> <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-cfe0"> <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-cfe8"> Address </label> </div> <input autocomplete="off" spellcheck="false" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-haspopup="listbox" aria-controls="addr-cfe0-dropdown" id="address-cfe8" data-midwest-input-target="input" data-midwest-address-target="input" data-action="input->midwest-address#search keydown->midwest-address#navigate" type="text" name="address" /> </div> <div id="addr-cfe0-dropdown" popover="manual" style="position-anchor: --addr-cfe0; anchor-name: --addr-cfe0-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="address_latitude" value="" data-midwest-address-target="latInput"> <input type="hidden" name="address_longitude" value="" data-midwest-address-target="lngInput"> <input type="hidden" name="address_place_id" value="" data-midwest-address-target="placeIdInput"> <div class="midwest-address__map" style="--address-map-height: 240px" hidden aria-hidden="true" data-midwest-address-target="mapContainer"> </div> </div> </div> </fieldset> </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
23
24
25
26
27
28
<%= midwest_form_with(url: "#", method: :get) do |form| %> <%= midwest_grid(columns: 2, gap: 2) do %> <div class="flex flex-col gap-4"> <%= midwest_form_field_group(label: "Personal info") do %> <%= midwest_grid(gap: 1) do %> <%= form.text_field :first_name, label: "First name", placeholder: "Jane" %> <%= form.text_field :last_name, label: "Last name", placeholder: "Smith" %> <% end %> <% end %> <%= midwest_form_field_group(label: "Location") do %> <%= form.address_field :address, label: "Address", placeholder: "Search for an address…", show_map: true %> <% end %> </div> <div> <%= midwest_card do |card| %> <% card.with_header { tag.h4("Summary") } %> <% card.with_section do %> <%= form.live_summary %> <% end %> <% end %> </div> <% end %><% end %>With Address Field
Address fields display the typed or geocoded address as plain text. Once a place is selected, hovering the address value in the summary reveals a detail popup showing the resolved latitude, longitude, and place ID. The summary updates immediately when a place is geocoded.
No params configured.
No assets to display.
Add a .js or .css file alongside the component to see it here.
Figma embed for Form Live Summary/with_address
Annotate a preview to embed its Figma design here:
@figma "https://figma.com/..."