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
<form data-controller="midwest-form" action="#" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="7xTZ-fuWOLVK5N4MxtYdtESz6b9yFbiDF1sEnb14IIFW7gs13_cnFZiLEthIw5B7a0N6HleLrYQRHLwcFhnl1w" autocomplete="off" />
  <div class="midwest-collection midwest-form-group ">
    <div class="midwest-form-group__top">
      <label class="midwest-label " for="item_plan_ids-12d28">
        Plans
      </label>
    </div>
    <div class="midwest-grid" style="--grid-width: 100%; --grid-gap: 0.25rem">
      <div class="midwest-checkbox midwest-form-group ">
        <div class="midwest-form-group__top">
          <input name="item[plan_ids][]" type="hidden" value="0" autocomplete="off" /><input id="item_plan_ids-12d30" class="checkbox" name="item[plan_ids][]" aria-checked="false" type="checkbox" value="1" />
          <label class="midwest-label " for="item_plan_ids-12d30">
            Starter
          </label>
        </div>
      </div>
      <div class="midwest-checkbox midwest-form-group ">
        <div class="midwest-form-group__top">
          <input name="item[plan_ids][]" type="hidden" value="0" autocomplete="off" /><input id="item_plan_ids-12d38" class="checkbox" name="item[plan_ids][]" aria-checked="false" type="checkbox" value="2" />
          <label class="midwest-label " for="item_plan_ids-12d38">
            Pro
          </label>
        </div>
      </div>
      <div class="midwest-checkbox midwest-form-group ">
        <div class="midwest-form-group__top">
          <input name="item[plan_ids][]" type="hidden" value="0" autocomplete="off" /><input id="item_plan_ids-12d40" class="checkbox" name="item[plan_ids][]" aria-checked="false" type="checkbox" value="3" />
          <label class="midwest-label " for="item_plan_ids-12d40">
            Enterprise
          </label>
        </div>
      </div>
    </div>
  </div>
</form>
1
2
3
<%= midwest_form_with(url: "#", scope: :item) do |form| %>
  <%= form.collection_check_boxes :plan_ids, plans, :id, :title, label: "Plans" %>
<% end %>

Checkboxes

A collection rendered as individual checkboxes. Each item in the collection becomes a labelled checkbox; selected values are submitted as an array.

No params configured.

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

Accessibility

Figma embed for Collection/checkboxes

Annotate a preview to embed its Figma design here:

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