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
<div class="p-8 max-w-sm flex flex-col gap-4">
  <div class="midwest-input midwest-form-group type-number" data-controller="midwest-input">
    <div class="midwest-form-group__top">
      <label class="midwest-label " for="quantity-12da0">
        Quantity
      </label>
    </div>
    <div class="midwest-input-increments-wrapper">
      <button type="button" class="midwest-input-step" data-action="click->midwest-input#decrement" aria-label="Decrease">−</button>
      <input type="number" name="quantity" id="quantity-12da0" value="1" data-midwest-input-target="input" />
      <button type="button" class="midwest-input-step" data-action="click->midwest-input#increment" aria-label="Increase">+</button>
    </div>
  </div>
  <div class="midwest-input midwest-form-group type-number" data-controller="midwest-input">
    <div class="midwest-form-group__top">
      <label class="midwest-label " for="rating-12da8">
        Rating (1–10)
      </label>
    </div>
    <div class="midwest-input-increments-wrapper">
      <button type="button" class="midwest-input-step" data-action="click->midwest-input#decrement" aria-label="Decrease">−</button>
      <input type="number" name="rating" id="rating-12da8" value="5" min="1" max="10" data-midwest-input-target="input" />
      <button type="button" class="midwest-input-step" data-action="click->midwest-input#increment" aria-label="Increase">+</button>
    </div>
  </div>
  <div class="midwest-input midwest-form-group type-number" data-controller="midwest-input">
    <div class="midwest-form-group__top">
      <label class="midwest-label " for="amount-12db0">
        Amount (step 5)
      </label>
    </div>
    <div class="midwest-input-increments-wrapper">
      <button type="button" class="midwest-input-step" data-action="click->midwest-input#decrement" aria-label="Decrease">−</button>
      <input type="number" name="amount" id="amount-12db0" value="0" min="0" max="100" step="5" data-midwest-input-target="input" />
      <button type="button" class="midwest-input-step" data-action="click->midwest-input#increment" aria-label="Increase">+</button>
    </div>
  </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
<div class="p-8 max-w-sm flex flex-col gap-4">
  <%# Basic stepper %>
  <%= midwest_form_input(name: :quantity, label: "Quantity", type: :number,
      value: 1, increments: true) %>
  <%# With min, max, and step via html_options %>
  <%= midwest_form_input(name: :rating, label: "Rating (1–10)", type: :number,
      value: 5, increments: true, min: 1, max: 10) %>
  <%# Step of 5 %>
  <%= midwest_form_input(name: :amount, label: "Amount (step 5)", type: :number,
      value: 0, increments: true, min: 0, max: 100, step: 5) %>
</div>

Number Increments

Pass increments: true on a type: :number input to replace the browser's native spinners with explicit −/+ stepper buttons. Respects min:, max:, and step: attributes passed via html_options.

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

Annotate a preview to embed its Figma design here:

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