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="jipoPLiqMSMOl4hOOI97H52b9FnkjN8INHy6Z20hvn9_zPeO2mtTbhu6MppMK63tRNCKX9dzXEqqZCDHrtOvww" autocomplete="off" />
  <div class="midwest-collection midwest-form-group ">
    <div class="midwest-form-group__top">
      <label class="midwest-label " for="item_plan_id-13060">
        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-13068" class="radio" aria-checked="false" type="radio" value="1" name="item[plan_id]" />
          <label class="midwest-label " for="item_plan_id-13068">
            Starter
          </label>
        </div>
      </div>
      <div class="midwest-radio midwest-form-group ">
        <div class="midwest-form-group__top">
          <input id="item_plan_id-13070" class="radio" aria-checked="false" type="radio" value="2" name="item[plan_id]" />
          <label class="midwest-label " for="item_plan_id-13070">
            Pro
          </label>
        </div>
      </div>
      <div class="midwest-radio midwest-form-group ">
        <div class="midwest-form-group__top">
          <input id="item_plan_id-13078" class="radio" aria-checked="false" type="radio" value="3" name="item[plan_id]" />
          <label class="midwest-label " for="item_plan_id-13078">
            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/..."