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
<div class="flex flex-col gap-4 max-w-sm">
  <div class="midwest-input midwest-form-group type-email floating" data-controller="midwest-input">
    <div class="midwest-input-floating-wrapper">
      <input type="email" name="email" id="email-e5e0" placeholder=" " data-midwest-input-target="input" />
      <label for="email-e5e0" class="midwest-input-floating-label">Email address</label>
    </div>
  </div>
  <div class="midwest-input midwest-form-group type-password floating" data-controller="midwest-input">
    <div class="midwest-input-floating-wrapper">
      <input type="password" name="password" id="password-e5e8" placeholder=" " data-midwest-input-target="input" />
      <label for="password-e5e8" class="midwest-input-floating-label">Password</label>
    </div>
  </div>
  <div class="midwest-input midwest-form-group type-text floating" data-controller="midwest-input">
    <div class="midwest-input-floating-wrapper">
      <input type="text" name="prefilled" id="prefilled-e5f0" value="Jane Doe" placeholder=" " data-midwest-input-target="input" />
      <label for="prefilled-e5f0" class="midwest-input-floating-label">Full name</label>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div class="flex flex-col gap-4 max-w-sm">
  <%= midwest_form_input(
    name: :email,
    type: :email,
    label: "Email address",
    floating: true
  ) %>
  <%= midwest_form_input(
    name: :password,
    type: :password,
    label: "Password",
    floating: true
  ) %>
  <%= midwest_form_input(
    name: :prefilled,
    type: :text,
    label: "Full name",
    value: "Jane Doe",
    floating: true
  ) %>
</div>

Floating Label

Pass floating: true to render the label as placeholder text that animates above the input on focus or when a value is present. The standard label above the input is replaced by the floating version.

No params configured.

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

Accessibility

Figma embed for Input/floating_label

Annotate a preview to embed its Figma design here:

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