Midwest Component Library v0.28.2

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="W-3wxj086EZCc2XjF3yGaxMHs8KLQF7jo047R4-nT_nJq3Goh2iSbh21Jjcsne0fz6f7Rp4-vpbv3Vjh1AIWpA" autocomplete="off" />
  <div class="midwest-collection midwest-form-group ">
    <div class="midwest-form-group__top">
      <label class="midwest-label " for="item_plan_id-db40">
        Plan
      </label>
    </div>
    <div class="midwest-grid" style="--grid-width: 100%; --grid-gap: 0.25rem">
      <div class="midwest-radio midwest-form-group ">
        <div class="midwest-form-group__top">
          <input id="item_plan_id-db48" class="radio" aria-checked="false" type="radio" value="1" name="item[plan_id]" />
          <label class="midwest-label " for="item_plan_id-db48">
            Starter
          </label>
        </div>
      </div>
      <div class="midwest-radio midwest-form-group ">
        <div class="midwest-form-group__top">
          <input id="item_plan_id-db50" class="radio" aria-checked="false" type="radio" value="2" name="item[plan_id]" />
          <label class="midwest-label " for="item_plan_id-db50">
            Pro
          </label>
        </div>
      </div>
      <div class="midwest-radio midwest-form-group ">
        <div class="midwest-form-group__top">
          <input id="item_plan_id-db58" class="radio" aria-checked="false" type="radio" value="3" name="item[plan_id]" />
          <label class="midwest-label " for="item_plan_id-db58">
            Enterprise
          </label>
        </div>
      </div>
    </div>
  </div>
</form>
1
2
3
<%= midwest_form_with(url: "#", scope: :item) do |form| %>
  <%= form.collection_radio_buttons :plan_id, plans, :id, :title, label: "Plan" %>
<% end %>

Radio buttons

A collection rendered as individual radio buttons. Only one option can be selected at a time.

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

Annotate a preview to embed its Figma design here:

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