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
<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" class="midwest-address" style="anchor-name: --addr-cde0">
        <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-cde8">
              Address
            </label>
          </div>
          <input type="text" name="address" id="address-cde8" autocomplete="off" spellcheck="false" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-haspopup="listbox" aria-controls="addr-cde0-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-cde0-dropdown" popover="manual" style="position-anchor: --addr-cde0; anchor-name: --addr-cde0-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>
    </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
<form>
  <%= midwest_grid(columns: 2, gap: 2) do %>
    <div>
      <%= midwest_form_address(
        name: :address,
        label: params[:label].presence || "Address",
        placeholder: params[:placeholder].presence || "Search for an address...",
        description: params[:description].presence,
        error: params[:error].presence,
        required: params[:required] == true,
        disabled: params[:disabled] == true,
        show_map: params[:show_map] == true,
        map_height: params[:map_height].to_i.positive? ? params[:map_height].to_i : 240,
        country_codes: params[:country_codes].presence&.split(",")&.map(&:strip) || []
      ) %>
    </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>

Playground

Adjust common options live. A live summary panel reflects the current address value and exposes geocode details on hover after a place is picked.

Param Description Input

Label for the field

Placeholder text inside the input

Helper text below the label

Error message (sets error state)

Mark the field as required

Disable the field

Show map preview after selection

Height of the map preview in pixels

Comma-separated country codes to restrict results (e.g. us,ca)

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

Accessibility

Figma embed for Address/playground

Annotate a preview to embed its Figma design here:

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