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
<div class="p-8 max-w-sm">
  <div class="midwest-autocomplete midwest-form-group midwest-autocomplete is-multiple is-free-form"
     data-controller="midwest-autocomplete"
     data-midwest-autocomplete-multiple-value="true"
     data-midwest-autocomplete-options-value="[]"
     data-midwest-autocomplete-url-value=""
     data-midwest-autocomplete-turbo-frame-url-value=""
     data-midwest-autocomplete-free-form-value="true"
     data-name="post[tags][]">
    <div class="midwest-form-group__top">
      <label class="midwest-label " for="post[tags][]-e6a8">
        Tags
      </label>
    </div>
    <div class="midwest-autocomplete-control" style="anchor-name: --ac-e6a8" data-action="click->midwest-autocomplete#focusInput">
      <div class="midwest-autocomplete-tokens" data-midwest-autocomplete-target="tokens">
      </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-e6b0">
          </label>
        </div>
        <input type="text" id="field-e6b0" autocomplete="off" spellcheck="false" aria-describedby="post[tags][]-e6a8-desc" role="combobox" aria-autocomplete="list" aria-expanded="false" aria-haspopup="listbox" aria-controls="ac-e6a8-dropdown" placeholder="Add a tag..." 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-e6a8-dropdown" popover="manual" class="midwest-popover anchored midwest-autocomplete-dropdown" style="position-anchor: --ac-e6a8; anchor-name: --ac-e6a8-dropdown" role="listbox" aria-label="Tags" aria-multiselectable="true" data-midwest-autocomplete-target="dropdown">
      <div class="midwest-autocomplete-dropdown-body">
        <ul class="midwest-autocomplete-list" hidden
              data-midwest-autocomplete-target="freeFormHintList">
          <li class="midwest-autocomplete-free-form-hint"
                data-action="mousedown->midwest-autocomplete#addFreeFormTagFromHint">
            Hit <kbd class="midwest-kbd">Enter</kbd>
            to add
            <span class="midwest-autocomplete-free-form-hint-value"
                    data-midwest-autocomplete-target="freeFormHintValue"></span>
          </li>
        </ul>
      </div>
    </div>
    <div id="post[tags][]-e6a8-desc" class="midwest-form-group__bottom ">
      <span class="midwest-label description">
        Press Enter or comma to add a tag
      </span>
    </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
<div class="p-8 max-w-sm">
  <%= midwest_form_tag_input(
    name: "post[tags][]",
    label: "Tags",
    description: "Press Enter or comma to add a tag"
  ) %>
</div>

Default (free-form)

Type any value and press Enter or , to add it as a badge. Press Backspace on an empty input to remove the last tag.

No params configured.

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

Accessibility

Figma embed for Tag Input/default

Annotate a preview to embed its Figma design here:

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