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
<article data-controller="midwest-card" class="midwest-card">
  <div class="wrap">
    <section>    
      <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="field-de38">
            </label>
          </div>
          <input type="text" id="field-de38" 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="field-de40">
            </label>
          </div>
          <input type="text" id="field-de40" 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="field-de48">
            </label>
          </div>
          <input type="text" id="field-de48" 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="field-de50">
            </label>
          </div>
          <input type="text" id="field-de50" 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="field-de58">
            </label>
          </div>
          <input type="text" id="field-de58" data-midwest-input-target="input" />
        </div>
      </div>
    </section>
  </div>
</article>
1
2
3
4
5
6
7
8
9
<%= midwest_card do |card| %>
  <% card.with_section do %>
    <%= midwest_grid(gap: 1) do %>
      <% 5.times do %>
        <%= midwest_form_input(name: params[:name], value: params[:value], type: params[:type] || :text, label: params[:label], description: params[:description], disabled: params[:disabled], inline: params[:inline], optional: params[:optional], placeholder: params[:placeholder], error: params[:error], state: params[:state]) %>
      <% end %>
    <% end %>
  <% end %>
<% end %>

Default

This is the minimum code needed to make a input.

Param Description Input

—

—

The potential input types this component can render as

—

—

—

—

—

—

—

—

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

Accessibility

Figma embed for Input/default

Annotate a preview to embed its Figma design here:

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