Midwest Component Library v0.24.0

Previews

No matching results.

x
1
2
3
4
5
6
7
8
9
10
<div class="p-8 max-w-sm">
  <div class="midwest-input midwest-form-group type-search" data-controller="midwest-input">
    <div class="midwest-form-group__top">
      <label class="midwest-label " for="q-e9e8">
        Search
      </label>
    </div>
    <input type="search" name="q" id="q-e9e8" placeholder="Search…" data-midwest-input-target="input" />
  </div>
</div>
1
2
3
<div class="p-8 max-w-sm">
  <%= midwest_form_input(name: :q, type: :search, label: "Search", placeholder: "Search…") %>
</div>

Search

A search input. Browsers that lack a native clear button (Firefox) will have one injected by the Stimulus controller automatically.

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

Annotate a preview to embed its Figma design here:

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