Number Selector

A number selector allows the user to add or remove quantities incrementally.


When to Use

  • Use a number selector when users are most likely to increase or decrease a value by a small range of increments. For example, when adding passengers to a travel booking.

When Not to Use

Developer Notes

<style>
/* Example Styles */
.spark-number-examples > .spark-number-selector {
  margin-right: 1rem;
}
</style>
<div class="spark-number-examples">
<div class="spark-number-selector">
  <label>Label</label>
  <button class="spark-btn spark-btn--secondary spark-number-selector__down" title="Less"></button>
  <input type="number" min="0" max="3" value="0">
  <button class="spark-btn spark-btn--secondary spark-number-selector__up" title="More"></button>
</div>

<div class="spark-number-selector">
  <label>Label</label>
  <button class="spark-btn spark-btn--secondary spark-number-selector__down" title="Less"></button>
  <input type="number" min="-10" max="30" value="-5">
  <button class="spark-btn spark-btn--secondary spark-number-selector__up" title="More"></button>
</div>

<div class="spark-number-selector">
  <label>Label</label>
  <button class="spark-btn spark-btn--secondary spark-number-selector__down" title="Less"></button>
  <input type="number" min="-10" max="30" step="5" value="0">
  <button class="spark-btn spark-btn--secondary spark-number-selector__up" title="More"></button>
</div>

<div class="spark-number-selector">
  <label>Label</label>
  <button class="spark-btn spark-btn--secondary spark-number-selector__down" title="Less" disabled></button>
  <input type="number" min="-10" max="30" step="5" value="0" disabled>
  <button class="spark-btn spark-btn--secondary spark-number-selector__up" title="More" disabled></button>
</div>
</div>
// Vanilla JS
var el = document.querySelector('.spark-number-selector');
var numberSelectorInstance = new Spark.NumberSelector(el);

// jQuery
$('.spark-number-selector').sparkNumberSelector();

A number selector is a simple combination of two buttons and a number <input> element. The button to decrement the number should have a class of .spark-number-selector__down. Similarly, the button to increment the number should have a class of .spark-number-selector__up.

Use of the number selector requires a JavaScript helper. It can be instantiated using new Spark.NumberSelector(el) or $(el).sparkNumberSelector(). You may programmatically call the value method to get or set the value of the input, as well as use the increment and decrement methods to step the value up or down.