Vitreo
Forms

Number stepper

Minus and plus around a number

Quantity

Code 
<div class="stepper" data-stepper>
  <button type="button" class="btn btn-gray btn-sm btn-icon" aria-label="Less" data-step="-1"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></button>
  <input id="ns-1" type="number" value="2" min="1" max="10" step="1" aria-label="Quantity" inputmode="numeric">
  <button type="button" class="btn btn-gray btn-sm btn-icon" aria-label="More" data-step="1"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></button>
</div>

Guests

Code 
<div class="stepper" data-stepper>
  <button type="button" class="btn btn-gray btn-sm btn-icon" aria-label="Less" data-step="-1"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></button>
  <input id="ns-2" type="number" value="4" min="1" max="12" step="1" aria-label="Guests" inputmode="numeric">
  <button type="button" class="btn btn-gray btn-sm btn-icon" aria-label="More" data-step="1"><svg class="icon" viewBox="0 0 24 24" aria-hidden="true">…</svg></button>
</div>
© Vitreo. All rights reserved.