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
<div class="midwest-select midwest-form-group ">
  <div class="midwest-form-group__top">
    <label class="midwest-label " for="vehicle-e998">
      Vehicle
    </label>
  </div>
  <select id="vehicle-e998" class=""><optgroup label="Cars"><option value="sedan">Sedan</option>
      <option value="suv">SUV</option>
      <option value="hatchback">Hatchback</option></optgroup><optgroup label="Trucks"><option value="pickup">Pickup</option>
      <option value="semi">Semi</option></optgroup><optgroup label="Motorcycles"><option value="sport">Sport</option>
      <option value="cruiser">Cruiser</option></optgroup></select>
  <div class="midwest-form-group__bottom ">
    <span class="midwest-label description">
      Choose your preferred vehicle.
    </span>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
<%= midwest_form_select(
  name: :vehicle,
  label: "Vehicle",
  description: "Choose your preferred vehicle.",
  choices: {
    "Cars" => [["Sedan", "sedan"], ["SUV", "suv"], ["Hatchback", "hatchback"]],
    "Trucks" => [["Pickup", "pickup"], ["Semi", "semi"]],
    "Motorcycles" => [["Sport", "sport"], ["Cruiser", "cruiser"]]
  }
) %>

Grouped

Pass choices as a Hash of { "Group Label" => [[label, value], ...] } to render <optgroup> sections. The component auto-detects grouped structure, or you can force it with grouped: true.

No params configured.

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

Accessibility

Figma embed for Select/grouped

Annotate a preview to embed its Figma design here:

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