Form Stepper
Add a plus and minus control to a form input that increments and decrements the value
This component should only be used in conjunction with an input with type="number"
but does not handle any specific styling of the input or buttons. You can use the options to change the buttons if required.
There is no custom styling bundled with this component but classes are added to the generated markup that can be styled. The element itself gets the class f-form-stepper
, the up button gets the class f-stepper f-stepper-up
and the down button gets the class f-stepper f-stepper-down
.
Usage
Add a data attribute data-f-form-stepper
to a number input.
Example
Markup
<form class="f-form">
<p>
<input type="number" class="f-form-width-small" data-f-form-stepper>
</p>
</form>
Inside Large Form
If the form has a class of f-form-large
from the Form Component the button will automatically inherit the larger styling to match.
Example
Markup
<form class="f-form f-form-large">
<p>
<input type="number" class="f-form-width-small" data-f-form-stepper>
</p>
</form>
Minimum & Maximum Value
To cap the value at a specific minimum or maximum just add min: [number] and/or max: [number] to the options.
Example
Markup
<form class="f-form f-form-large">
<p>
<input type="number" class="f-form-width-small" data-f-form-stepper="{ min: 5, max: 10 }">
</p>
</form>
JavaScript options
Option | Possible value | Default | Description |
---|---|---|---|
buttonClass |
string | f-btn |
A class to add to the buttons generated |
upHtml |
string | <i class="material-icons">add</i> | The HTML put into the next button |
downHtml |
string | <i class="material-icons">remove</i> | The HTML put into the previous button |
min |
integer | false | The minimum value allowed |
max |
integer | false | The maximum value allowed |
Init element manually
let objStepper = FatKit.formStepper(element, { /* options */ });