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
<form data-controller="midwest-form" action="#" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="4FH_HQFRmCFRzpX1YV1d7PzLTtnJDcK7LH5Ds3bbMsJKRfvR7OrstOndlKFn9dZtm_VOb9gUAIlh5rMWjpAa6g" autocomplete="off" />
  <div class="midwest-collection midwest-form-group ">
    <div class="midwest-form-group__top">
      <label class="midwest-label " for="item_plan_ids-f090">
        Plans
      </label>
    </div>
    <div class="midwest-grid" style="--grid-width: 100%; --grid-gap: 0.25rem">
      <label class="midwest-card-option " for="item_plan_ids-f098">
        <input name="item[plan_ids][]" type="hidden" value="0" autocomplete="off" /><input id="item_plan_ids-f098" class="checkbox" name="item[plan_ids][]" aria-checked="false" type="checkbox" value="1" />
        <div class="midwest-card-option__body">
          <div class="midwest-card-option__icon">
            <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="Rocket outline"><title>Rocket outline</title>
                  <path d="M461.81 53.81a4.4 4.4 0 00-3.3-3.39c-54.38-13.3-180 34.09-248.13 102.17a294.9 294.9 0 00-33.09 39.08c-21-1.9-42-.3-59.88 7.5-50.49 22.2-65.18 80.18-69.28 105.07a9 9 0 009.8 10.4l81.07-8.9a180.29 180.29 0 001.1 18.3 18.15 18.15 0 005.3 11.09l31.39 31.39a18.15 18.15 0 0011.1 5.3 179.91 179.91 0 0018.19 1.1l-8.89 81a9 9 0 0010.39 9.79c24.9-4 83-18.69 105.07-69.17 7.8-17.9 9.4-38.79 7.6-59.69a293.91 293.91 0 0039.19-33.09c68.38-68 115.47-190.86 102.37-247.95zM298.66 213.67a42.7 42.7 0 1160.38 0 42.65 42.65 0 01-60.38 0z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></path><path d="M109.64 352a45.06 45.06 0 00-26.35 12.84C65.67 382.52 64 448 64 448s65.52-1.67 83.15-19.31A44.73 44.73 0 00160 402.32" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></path></svg>
              </div>
            </div>
          </div>
          <strong class="midwest-card-option__title">Starter</strong>
          <span class="midwest-card-option__description">Everything you need to get off the ground</span>
        </div>
      </label>
      <label class="midwest-card-option " for="item_plan_ids-f0a0">
        <input name="item[plan_ids][]" type="hidden" value="0" autocomplete="off" /><input id="item_plan_ids-f0a0" class="checkbox" name="item[plan_ids][]" aria-checked="false" type="checkbox" value="2" />
        <div class="midwest-card-option__body">
          <div class="midwest-card-option__icon">
            <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="Flash outline"><title>Flash outline</title>
                  <path d="M315.27 33L96 304h128l-31.51 173.23a2.36 2.36 0 002.33 2.77h0a2.36 2.36 0 001.89-.95L416 208H288l31.66-173.25a2.45 2.45 0 00-2.44-2.75h0a2.42 2.42 0 00-1.95 1z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></path></svg>
              </div>
            </div>
          </div>
          <strong class="midwest-card-option__title">Pro</strong>
          <span class="midwest-card-option__description">Advanced features for growing teams</span>
        </div>
      </label>
      <label class="midwest-card-option " for="item_plan_ids-f0a8">
        <input name="item[plan_ids][]" type="hidden" value="0" autocomplete="off" /><input id="item_plan_ids-f0a8" class="checkbox" name="item[plan_ids][]" aria-checked="false" type="checkbox" value="3" />
        <div class="midwest-card-option__body">
          <div class="midwest-card-option__icon">
            <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="Shield outline"><title>Shield outline</title>
                  <path d="M463.1 112.37C373.68 96.33 336.71 84.45 256 48c-80.71 36.45-117.68 48.33-207.1 64.37C32.7 369.13 240.58 457.79 256 464c15.42-6.21 223.3-94.87 207.1-351.63z" fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="32"></path></svg>
              </div>
            </div>
          </div>
          <strong class="midwest-card-option__title">Enterprise</strong>
          <span class="midwest-card-option__description">Full control, compliance, and dedicated support</span>
        </div>
      </label>
    </div>
  </div>
</form>
1
2
3
<%= midwest_form_with(url: "#", scope: :item) do |form| %>
  <%= form.collection_icon_check_boxes :plan_ids, plans, :id, :title, :icon, :description, label: "Plans" %>
<% end %>

Card checkboxes

Each option is rendered as a selectable card with an icon, title, and description. Multiple cards can be active simultaneously.

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/card_checkboxes

Annotate a preview to embed its Figma design here:

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