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
<form data-controller="midwest-form" action="/products" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="iijBa4sG_V4ci-V9MMKDyTbwc1f4L3LYokAnHHQhmrIwWGJuwfWDbTEk906X4yJy5fak45U--XxH7LAIFm67pw" autocomplete="off" />
  <div class="midwest-input midwest-form-group type-text" data-controller="midwest-input">
    <div class="midwest-form-group__top">
      <label class="midwest-label " for="product_title-e068">
        Product Name
      </label>
    </div>
    <input id="product_title-e068" data-midwest-input-target="input" type="text" name="product[title]" />
  </div>
  <fieldset data-controller="midwest-repeatable" data-midwest-repeatable-min-value="0" data-midwest-repeatable-template-id-value="repeatable-e070-template" class="midwest-repeatable" id="repeatable-e070-fieldset">
    <div class="midwest-form-group__top">
      <label class="midwest-label " for="repeatable-e070-fieldset">
        Variants
      </label>
    </div>
    <div class="midwest-repeatable-container" data-midwest-repeatable-target="container">
      <div class="midwest-repeatable-empty " data-midwest-repeatable-target="empty">
        <p class="text-sm text-gray-4">No variants yet. Click "Add Variant" to add one.</p>
      </div>
      <div class="midwest-repeatable-item" data-midwest-repeatable-target="template" id="repeatable-e070-template" style="display:none;">
        <div class="midwest-repeatable-item__content">        
          <div class="midwest-input midwest-form-group type-text" data-controller="midwest-input">
            <div class="midwest-form-group__top">
              <label class="midwest-label " for="product_variants_attributes___INDEX___name-e078">
                Variant Name
              </label>
            </div>
            <input id="product_variants_attributes___INDEX___name-e078" data-midwest-input-target="input" type="text" name="product[variants_attributes][__INDEX__][name]" />
          </div>
          <div class="midwest-input midwest-form-group type-number" data-controller="midwest-input">
            <div class="midwest-form-group__top">
              <label class="midwest-label " for="product_variants_attributes___INDEX___price-e080">
                Price
              </label>
            </div>
            <input step="0.01" id="product_variants_attributes___INDEX___price-e080" data-midwest-input-target="input" type="number" name="product[variants_attributes][__INDEX__][price]" />
          </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="product_variants_attributes___INDEX___sku-e088">
                SKU
              </label>
            </div>
            <input id="product_variants_attributes___INDEX___sku-e088" data-midwest-input-target="input" type="text" name="product[variants_attributes][__INDEX__][sku]" />
          </div>
        </div>
        <div class="midwest-repeatable-item__actions"><button type="button" class="midwest-repeatable-item__remove" data-action="click->midwest-repeatable#remove" data-midwest-repeatable-target="removeButton" aria-label="Remove">Remove
            <div class="midwest-icon " aria-hidden="true">
              <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></div>
        <input type="hidden" name="product[variants_attributes][__INDEX__][_destroy]" value="0" data-midwest-repeatable-target="destroy"></div>
    </div>
    <div class="midwest-repeatable-controls">
      <button type="button"
              class="midwest-repeatable-add"
              data-action="click->midwest-repeatable#add"
        data-midwest-repeatable-target="addButton">
        <div class="midwest-icon " aria-hidden="true">
          <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="Add"><title>Add</title>
              <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32" d="M256 112v288M400 256H112"></path></svg>
          </div>
        </div>
        <span>Add Variant</span>
      </button>
    </div>
  </fieldset>
</form>
1
2
3
4
5
6
7
8
9
10
11
<%= midwest_form_with(model: product) do |form| %>
  <%= form.text_field :title, label: "Product Name" %>
  <%= form.repeatable :variants, label: "Variants", add_text: "Add Variant", remove_text: "Remove" do |r| %>
    <% r.each do |variant_form| %>
      <%= variant_form.text_field :name, label: "Variant Name" %>
      <%= variant_form.number_field :price, label: "Price", step: 0.01 %>
      <%= variant_form.text_field :sku, label: "SKU" %>
    <% end %>
  <% end %>
<% end %>

Empty

Repeatable fields with no existing items.

No params configured.

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

Accessibility

Figma embed for Repeatable/empty

Annotate a preview to embed its Figma design here:

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