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
<div class="flex flex-col gap-4 max-w-sm">
  <div class="midwest-form-group">
    <label for="plan-select" class="midwest-label">Plan</label>
    <select id="plan-select" class="block w-full rounded-2xl border-gray-1 border shadow-sm px-3 py-2">
      <option value="">Choose a plan</option>
      <option value="free">Free</option>
      <option value="pro">Pro</option>
      <option value="enterprise">Enterprise</option>
    </select>
  </div>
  <fieldset data-controller="midwest-show-if" data-midwest-show-if-watch-value="#plan-select" data-midwest-show-if-is-value="free" data-midwest-show-if-negate-value="true" 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-134d0">
          Billing email
        </label>
      </div>
      <input type="email" name="billing_email" id="billing_email-134d0" placeholder="billing@example.com" data-midwest-input-target="input" />
    </div>
  </fieldset>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<div class="flex flex-col gap-4 max-w-sm">
  <div class="midwest-form-group">
    <label for="plan-select" class="midwest-label">Plan</label>
    <select id="plan-select" class="block w-full rounded-2xl border-gray-1 border shadow-sm px-3 py-2">
      <option value="">Choose a plan</option>
      <option value="free">Free</option>
      <option value="pro">Pro</option>
      <option value="enterprise">Enterprise</option>
    </select>
  </div>
  <%= midwest_show_if watch: "#plan-select", is: "free", negate: true do %>
    <%= midwest_form_input(
      name: :billing_email,
      type: :email,
      label: "Billing email",
      placeholder: "billing@example.com"
    ) %>
  <% end %>
</div>

Inverted

Pass negate: true to show the section when the value does NOT match.

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

Annotate a preview to embed its Figma design here:

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