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
<div class="flex flex-col gap-4 max-w-sm">
  <fieldset>
    <legend class="font-semibold mb-2">Shipping method</legend>
    <div class="flex flex-col gap-2">
      <label class="flex items-center gap-2">
        <input type="radio" name="shipping" value="standard" id="shipping-standard">
        Standard
      </label>
      <label class="flex items-center gap-2">
        <input type="radio" name="shipping" value="express" id="shipping-express">
        Express
      </label>
      <label class="flex items-center gap-2">
        <input type="radio" name="shipping" value="overnight" id="shipping-overnight">
        Overnight
      </label>
    </div>
  </fieldset>
  <fieldset data-controller="midwest-show-if" data-midwest-show-if-watch-value="#shipping-overnight" data-midwest-show-if-is-value="overnight" data-midwest-show-if-negate-value="false" class="midwest-show-if" hidden="hidden" disabled="disabled">
    <div class="midwest-callout theme-orange">
      <div class="callout-wrap">
        Overnight shipping incurs an additional fee of $25.
      </div>
    </div>
  </fieldset>
</div>
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
<div class="flex flex-col gap-4 max-w-sm">
  <fieldset>
    <legend class="font-semibold mb-2">Shipping method</legend>
    <div class="flex flex-col gap-2">
      <label class="flex items-center gap-2">
        <input type="radio" name="shipping" value="standard" id="shipping-standard">
        Standard
      </label>
      <label class="flex items-center gap-2">
        <input type="radio" name="shipping" value="express" id="shipping-express">
        Express
      </label>
      <label class="flex items-center gap-2">
        <input type="radio" name="shipping" value="overnight" id="shipping-overnight">
        Overnight
      </label>
    </div>
  </fieldset>
  <%= midwest_show_if watch: "#shipping-overnight", is: "overnight" do %>
    <%= midwest_callout state: :warning do %>
      Overnight shipping incurs an additional fee of $25.
    <% end %>
  <% end %>
</div>

Radio Buttons

Watches a radio button group and shows content when a specific option is selected.

No params configured.

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

Accessibility

Figma embed for Show If/radio

Annotate a preview to embed its Figma design here:

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