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
<form data-controller="midwest-form" action="#" accept-charset="UTF-8" method="get">
  <div class="flex flex-col gap-4 max-w-sm">
    <div class="midwest-select midwest-form-group ">
      <div class="midwest-form-group__top">
        <label class="midwest-label " for="role-f250">
          Role
        </label>
      </div>
      <select id="role-f250" name="role" class=""><option value="" label=" "></option>
        <option value="member">Member</option>
        <option value="admin">Admin</option>
        <option value="owner">Owner</option></select>
    </div>
    <fieldset data-controller="midwest-show-if" data-midwest-show-if-watch-value="[name="role"]" data-midwest-show-if-is-value="admin" data-midwest-show-if-negate-value="false" class="midwest-show-if" hidden="hidden" disabled="disabled">
      <div class="midwest-input midwest-form-group type-text" data-controller="midwest-input">
        <div class="midwest-form-group__top">
          <label class="midwest-label " for="admin_code-f258">
            Admin access code
          </label>
        </div>
        <input id="admin_code-f258" data-midwest-input-target="input" type="text" name="admin_code" />
      </div>
    </fieldset>
    <fieldset data-controller="midwest-show-if" data-midwest-show-if-watch-value="[name="role"]" data-midwest-show-if-is-value="owner" data-midwest-show-if-negate-value="false" class="midwest-show-if" hidden="hidden" disabled="disabled">
      <div class="midwest-input midwest-form-group type-email" data-controller="midwest-input">
        <div class="midwest-form-group__top">
          <label class="midwest-label " for="billing_email-f260">
            Billing email
          </label>
        </div>
        <input id="billing_email-f260" data-midwest-input-target="input" type="email" name="billing_email" />
      </div>
    </fieldset>
    <fieldset data-controller="midwest-show-if" data-midwest-show-if-watch-value="[name="role"]" data-midwest-show-if-is-value="member" data-midwest-show-if-negate-value="true" class="midwest-show-if" hidden="hidden" disabled="disabled">
      <div class="midwest-callout theme-orange">
        <div class="callout-wrap">
          Elevated roles require manager approval.
        </div>
      </div>
    </fieldset>
  </div>
</form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<%= midwest_form_with(url: "#", method: :get) do |form| %>
  <div class="flex flex-col gap-4 max-w-sm">
    <%= form.select :role, [["Member", "member"], ["Admin", "admin"], ["Owner", "owner"]] %>
    <%= form.show_if :role, is: "admin" do %>
      <%= form.text_field :admin_code, label: "Admin access code", placeholder: "Enter code" %>
    <% end %>
    <%= form.show_if :role, is: "owner" do %>
      <%= form.email_field :billing_email, label: "Billing email" %>
    <% end %>
    <%= form.show_if :role, is: "member", negate: true do %>
      <%= midwest_callout state: :warning do %>
        Elevated roles require manager approval.
      <% end %>
    <% end %>
  </div>
<% end %>

Form Builder

Inside a midwest_form_with block, use form.show_if(:attribute, is:) to watch a sibling field by attribute name. The watch: selector is derived automatically from the form object's field name.

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

Annotate a preview to embed its Figma design here:

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