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
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
<div class="p-8 max-w-sm">
  <div class="midwest-autocomplete midwest-form-group midwest-autocomplete is-multiple"
     data-controller="midwest-autocomplete"
     data-midwest-autocomplete-multiple-value="true"
     data-midwest-autocomplete-options-value="[{"value":"rustic","label":"Rustic"},{"value":"antique","label":"Antique"},{"value":"vinyl","label":"Vinyl"},{"value":"vintage","label":"Vintage"},{"value":"refurbished","label":"Refurbished"}]"
     data-midwest-autocomplete-url-value=""
     data-midwest-autocomplete-turbo-frame-url-value=""
     data-midwest-autocomplete-free-form-value="false"
     data-name="styles[]">
    <div class="midwest-form-group__top">
      <label class="midwest-label " for="styles-e950">
        Styles
      </label>
    </div>
    <div class="midwest-autocomplete-control" style="anchor-name: --ac-e950" data-action="click->midwest-autocomplete#focusInput">
      <div class="midwest-autocomplete-tokens" data-midwest-autocomplete-target="tokens">
        <span data-controller="midwest-badge" data-midwest-autocomplete-target="token" data-value="antique" class="midwest-badge is-removable size-default theme-primary midwest-autocomplete-token">
          <span class="value">Antique</span>
          <button type="button" class="remove" aria-label="Remove Antique" data-action="click->midwest-autocomplete#removeToken" data-value="antique">
            <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="Close"><title>Close</title>
                  <path d="M289.94 256l95-95A24 24 0 00351 127l-95 95-95-95a24 24 0 00-34 34l95 95-95 95a24 24 0 1034 34l95-95 95 95a24 24 0 0034-34z"></path></svg>
              </div>
            </div>
          </button>    <input type="hidden" name="styles[]" value="antique">
        </span>          <span data-controller="midwest-badge" data-midwest-autocomplete-target="token" data-value="vinyl" class="midwest-badge is-removable size-default theme-primary midwest-autocomplete-token">
          <span class="value">Vinyl</span>
          <button type="button" class="remove" aria-label="Remove Vinyl" data-action="click->midwest-autocomplete#removeToken" data-value="vinyl">
            <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="Close"><title>Close</title>
                  <path d="M289.94 256l95-95A24 24 0 00351 127l-95 95-95-95a24 24 0 00-34 34l95 95-95 95a24 24 0 1034 34l95-95 95 95a24 24 0 0034-34z"></path></svg>
              </div>
            </div>
          </button>    <input type="hidden" name="styles[]" value="vinyl">
        </span>    </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="field-e958">
          </label>
        </div>
        <input type="text" id="field-e958" autocomplete="off" spellcheck="false" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-haspopup="listbox" aria-controls="ac-e950-dropdown" placeholder="Add more…" data-midwest-input-target="input" data-midwest-autocomplete-target="input" data-action="input->midwest-autocomplete#search keydown->midwest-autocomplete#navigate focus->midwest-autocomplete#open paste->midwest-autocomplete#pasteTag" />
      </div>
    </div>
    <template data-midwest-autocomplete-target="multipleTokenTemplate">
      <span data-controller="midwest-badge" data-midwest-autocomplete-target="token" class="midwest-badge is-removable size-default theme-primary midwest-autocomplete-token">
        <span class="value"></span>
        <button type="button" class="remove" aria-label="Remove" data-action="click->midwest-autocomplete#removeToken">
          <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="Close"><title>Close</title>
                <path d="M289.94 256l95-95A24 24 0 00351 127l-95 95-95-95a24 24 0 00-34 34l95 95-95 95a24 24 0 1034 34l95-95 95 95a24 24 0 0034-34z"></path></svg>
            </div>
          </div>
        </button>    <input type="hidden">
      </span>  </template>
    <template data-midwest-autocomplete-target="singleTokenTemplate">
      <span class="midwest-badge size-default theme-primary midwest-autocomplete-token">
        <span class="value"></span>
        <input type="hidden">
      </span>  </template>
    <div id="ac-e950-dropdown" popover="manual" class="midwest-popover anchored midwest-autocomplete-dropdown" style="position-anchor: --ac-e950; anchor-name: --ac-e950-dropdown" role="listbox" aria-label="Styles" aria-multiselectable="true" data-midwest-autocomplete-target="dropdown">
      <div class="midwest-autocomplete-dropdown-body">
        <div class="midwest-autocomplete-loader" hidden aria-hidden="true" data-midwest-autocomplete-target="loader">
          <div class="midwest-loading-icon" role="img" aria-label="Loading">
            <div class="midwest-loading-icon-inner">
              <!-- By Sam Herbert (@sherb), for everyone. More @ http://goo.gl/7AJzbL -->
              <svg viewbox="0 0 120 30" xmlns="http://www.w3.org/2000/svg" fill="currentColor" class="Midwest-LoadingIcon__Svg" focusable="false" aria-hidden="true">
                <circle cx="15" cy="15" r="15">
                  <animate attributename="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcmode="linear" repeatcount="indefinite"></animate>
                  <animate attributename="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcmode="linear" repeatcount="indefinite"></animate>
                </circle>
                <circle cx="60" cy="15" r="9" fill-opacity="0.3">
                  <animate attributename="r" from="9" to="9" begin="0s" dur="0.8s" values="9;15;9" calcmode="linear" repeatcount="indefinite"></animate>
                  <animate attributename="fill-opacity" from="0.5" to="0.5" begin="0s" dur="0.8s" values=".5;1;.5" calcmode="linear" repeatcount="indefinite"></animate>
                </circle>
                <circle cx="105" cy="15" r="15">
                  <animate attributename="r" from="15" to="15" begin="0s" dur="0.8s" values="15;9;15" calcmode="linear" repeatcount="indefinite"></animate>
                  <animate attributename="fill-opacity" from="1" to="1" begin="0s" dur="0.8s" values="1;.5;1" calcmode="linear" repeatcount="indefinite"></animate>
                </circle>
              </svg>
            </div>
          </div>
        </div>
        <ul class="midwest-autocomplete-list" data-midwest-autocomplete-target="list"></ul>
      </div>
    </div>
    <p class="sr-only" role="status" aria-live="polite" aria-atomic="true" data-midwest-autocomplete-target="status"></p>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div class="p-8 max-w-sm">
  <%= midwest_form_autocomplete(
    name: :styles,
    label: "Styles",
    placeholder: "Add more…",
    choices: [
      { value: "rustic",      label: "Rustic" },
      { value: "antique",     label: "Antique" },
      { value: "vinyl",       label: "Vinyl" },
      { value: "vintage",     label: "Vintage" },
      { value: "refurbished", label: "Refurbished" }
    ],
    values: [
      { value: "antique", label: "Antique" },
      { value: "vinyl",   label: "Vinyl" }
    ]
  ) %>
</div>

Pre-selected values

Pass values: to pre-populate selected tokens.

No params configured.

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

Accessibility

Figma embed for Autocomplete/preselected

Annotate a preview to embed its Figma design here:

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