...
When the number field is empty:
clicking the up button will populate the field with a value 1 one interval above the minimum.
clicking the down button will populate the field with the minimum value.
...
When the stepper reaches the minimum or maximum value, the up/down buttons will be disabled respectively.
Other validations will be provided for invalid syntax, invalid numbers, and missing values. See Field Validation for more info.
Best Practices
Use:
When when the number field has a commonly used value.
When when most users will only make small adjustments (e.g. changing the number of desired items on a web store).
Don’t use:
When when the range of values is large, and the user may select any value within this range.
For for binary values (e.g. 0 and 1).
For for a range of three values or fewer → use Radio Buttons or Toggle Buttons.
...
Use meaningful intervals between values (not too small, not too big), so that each increase and decrease is predictable, noticeable, and valuable.
Show the range of valid values in the label when it is unusual or unexpected, to help the user avoid mistakes.
(Recommended). The values in the numeric field should be small, discrete numbers Avoid decimals as possible (e.g. 1, 2, 3 not 1.1, 1.2, 1.3).
...
Zeplin link | |
|---|---|
 |
Code
| Html macro | ||
|---|---|---|
| ||
<link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/fonts/css/verint_lux.css">
<link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/css/bootstrap.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/js/bootstrap.bundle.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/other/accessibility.js"></script>
<script src="https://ux.verint.com/bootstrap-4.0.0/dist/other/prism.min.js"></script>
<link rel="stylesheet" href="https://ux.verint.com/bootstrap-4.0.0/dist/other/prism-coy.min.css">
<div class="card">
<div class="card-header">Spinner <button id="toggleMarkup" type="button" class="btn btn-sm btn-outline-primary btn btn-fixed-width float-right m-0" onclick="$('pre' ).toggle()">Toggle Markup</button></div>
<div class="card-body">
<form>
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Regular</label>
<div class="col-lg-4">
<div class="form-control-container">
<input type="number" class="form-control form-control-sm" placeholder="Guiding Text" value="0">
<div class="btn-group btn-group-sm spinner-group">
<button type="button" class="btn btn-outline-light btn-sm increment" tabindex="-1">
<i class="icon-up"></i>
</button>
<button type="button" class="btn btn-outline-light btn-sm decrement" tabindex="-1">
<i class="icon-down"></i>
</button>
</div>
</div>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><div class="form-control-container">
<input type="number" class="form-control form-control-sm" placeholder="Guiding Text" value="0">
<div class="btn-group btn-group-sm spinner-group">
<button type="button" class="btn btn-outline-light btn-sm increment" tabindex="-1">
<i class="icon-up"></i>
</button>
<button type="button" class="btn btn-outline-light btn-sm decrement" tabindex="-1">
<i class="icon-down"></i>
</button>
</div>
</div></script></code></pre>
</div>
</div>
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Disabled</label>
<div class="col-lg-4">
<div class="form-control-container">
<input type="number" class="form-control form-control-sm" placeholder="Guiding Text" value="0" disabled>
<div class="btn-group btn-group-sm spinner-group">
<button type="button" class="btn btn-outline-light btn-sm increment" tabindex="-1" disabled>
<i class="icon-up"></i>
</button>
<button type="button" class="btn btn-outline-light btn-sm decrement" tabindex="-1" disabled>
<i class="icon-down"></i>
</button>
</div>
</div>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><div class="form-control-container">
<input type="number" class="form-control form-control-sm" placeholder="Guiding Text" value="0" disabled>
<div class="btn-group btn-group-sm spinner-group">
<button type="button" class="btn btn-outline-light btn-sm increment" tabindex="-1" disabled>
<i class="icon-up"></i>
</button>
<button type="button" class="btn btn-outline-light btn-sm decrement" tabindex="-1" disabled>
<i class="icon-down"></i>
</button>
</div>
</div></script></code></pre>
</div>
</div>
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Read-Only</label>
<div class="col-lg-4">
<div class="form-control-container">
<input type="number" class="form-control form-control-sm" placeholder="Guiding Text" value="0" readonly>
<div class="btn-group btn-group-sm spinner-group">
<button type="button" class="btn btn-outline-light btn-sm increment" tabindex="-1" disabled>
<i class="icon-up"></i>
</button>
<button type="button" class="btn btn-outline-light btn-sm decrement" tabindex="-1" disabled>
<i class="icon-down"></i>
</button>
</div>
</div>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><div class="form-control-container">
<input type="number" class="form-control form-control-sm" placeholder="Guiding Text" value="0" readonly>
<div class="btn-group btn-group-sm spinner-group">
<button type="button" class="btn btn-outline-light btn-sm increment" tabindex="-1" disabled>
<i class="icon-up"></i>
</button>
<button type="button" class="btn btn-outline-light btn-sm decrement" tabindex="-1" disabled>
<i class="icon-down"></i>
</button>
</div>
</div></script></code></pre>
</div>
</div>
<div class="form-group row">
<label for="inputKey" class="col-lg-2 col-form-label col-form-label-sm">Error</label>
<div class="col-lg-4">
<div class="form-control-container">
<input type="number" class="form-control form-control-sm is-invalid" placeholder="Guiding Text" value="0">
<div class="btn-group btn-group-sm spinner-group">
<button type="button" class="btn btn-outline-light btn-sm is-invalid increment" tabindex="-1">
<i class="icon-up"></i>
</button>
<button type="button" class="btn btn-outline-light btn-sm is-invalid decrement" tabindex="-1">
<i class="icon-down"></i>
</button>
</div>
</div>
</div>
<div class="col-lg-6">
<pre class="language-html"><code><script type="prism-html-markup"><div class="form-control-container">
<input type="number" class="form-control form-control-sm is-invalid" placeholder="Guiding Text" value="0">
<div class="btn-group btn-group-sm spinner-group">
<button type="button" class="btn btn-outline-light btn-sm is-invalid increment" tabindex="-1">
<i class="icon-up"></i>
</button>
<button type="button" class="btn btn-outline-light btn-sm is-invalid decrement" tabindex="-1">
<i class="icon-down"></i>
</button>
</div>
</div></script></code></pre>
</div>
</div>
</form>
</div>
</div>
<script>
$(".spinner-group .increment").on( "click", function() {
$(this).closest('.form-control-container').find('.form-control[type="number"]').val( function(i, oldval) {
return ++oldval;
});
});
$(".spinner-group .decrement").on( "click", function() {
$(this).closest('.form-control-container').find('.form-control[type="number"]').val( function(i, oldval) {
return --oldval;
});
});
</script> |
...