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
43
<fieldset class="midwest-form-field-group theme-primary">
  <legend class="field-group-legend">
    <span class="midwest-badge size-default theme-primary">
      <span class="value">Shipping Address</span>
    </span>
  </legend>  
  <div class="field-group-fields">
    <div class="midwest-input midwest-form-group type-text" data-controller="midwest-input">
      <div class="midwest-form-group__top">
        <label class="midwest-label " for="street-f900">
          Street
        </label>
      </div>
      <input type="text" name="street" id="street-f900" placeholder="123 Main St" data-midwest-input-target="input" />
    </div>
    <div class="midwest-grid" style="--grid-width: 200px; --grid-gap: 1rem">
      <div class="midwest-input midwest-form-group type-text" data-controller="midwest-input">
        <div class="midwest-form-group__top">
          <label class="midwest-label " for="city-f908">
            City
          </label>
        </div>
        <input type="text" name="city" id="city-f908" placeholder="Springfield" data-midwest-input-target="input" />
      </div>
      <div class="midwest-input midwest-form-group type-text" data-controller="midwest-input">
        <div class="midwest-form-group__top">
          <label class="midwest-label " for="state-f910">
            State
          </label>
        </div>
        <input type="text" name="state" id="state-f910" placeholder="IL" data-midwest-input-target="input" />
      </div>
      <div class="midwest-input midwest-form-group type-postal_code" data-controller="midwest-input">
        <div class="midwest-form-group__top">
          <label class="midwest-label " for="zip-f918">
            ZIP
          </label>
        </div>
        <input type="text" name="zip" id="zip-f918" placeholder="62701" pattern="^(?(^00000(|-0000))|(d{5}(|-d{4})))$" inputmode="numeric" data-midwest-input-target="input" />
      </div>
    </div>
  </div>
</fieldset>
1
2
3
4
5
6
7
8
<%= midwest_form_field_group(label: params[:label] || "Shipping Address", state: params[:state] || :default, disabled: params[:disabled]) do %>
  <%= midwest_form_input(name: "street", label: "Street", placeholder: "123 Main St") %>
  <%= midwest_grid(gap: 1) do %>
    <%= midwest_form_input(name: "city", label: "City", placeholder: "Springfield") %>
    <%= midwest_form_input(name: "state", label: "State", placeholder: "IL") %>
    <%= midwest_form_input(name: "zip", label: "ZIP", type: :postal_code, placeholder: "62701") %>
  <% end %>
<% end %>

Playground

This example uses dynamic preview parameters which can be edited live in the Lookbook UI

Param Description Input

The label displayed in the badge

Changes the badge and border color based on semantically named states

Disables all form controls within the group

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

Accessibility

Figma embed for Field Group/playground

Annotate a preview to embed its Figma design here:

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