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 */ });