How to add an attribute:

close icon
Hey! Give us some feedback here.

Input Counter

Increment and decrement (+ and -) counter in a Webflow Form.

Input Counter

Webflow Libraries component

Install Finsweet in Webflow Libraries
Copy this component inside Designer
Use this docs page to further customize
Scroll to docs
Step #1

Copy the Solution <script> and paste into the <head> of your page

copy icon
Copy Script
Step #2

Implement in Webflow

Apply attributes to elements on the page

Below is a list of elements and options that are used to create this Attributes functionality. Click any of them to see more details.

navigator arrow
Input
I want this
div block icon

Input

See how it works
see webflow attributes
to be the form input that holds the current value
Add this attribute
Description
Name
fs-inputcounter-element
copy icon
Value
input
copy icon
The form input the user can increment and decrement the value of.

Use the "Number" input type. If "Number" is not set in the input settings, Attributes will be automatically convert the input to type="number".

By default, the native browser input arrows are hidden using custom CSS. These are the small "up" and "down" arrows inside the number input.
navigator arrow
Increment
I want this
div block icon

Div Block

to be the increment (+) trigger
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-inputcounter-element
copy icon
Value
increment
copy icon
The increment (or plus) button.

Clicking this button will add (1) to the current input value.
navigator arrow
Decrement
I want this
div block icon

Div Block

to be the decrement (-) trigger
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-inputcounter-element
copy icon
Value
decrement
copy icon
The decrement (or minus) button.

Clicking this button will subtract (1) from the current input value.
navigator arrow
Reset
I want this
div block icon

Div Block

to reset the value in the input
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-inputcounter-element
copy icon
Value
decrement
copy icon
Optionally add a reset button that will "reset" the current value of the input.

The value will be set to the initial value.
navigator arrow

Option

Initial
The option to set an initial value for the input
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-inputcounter-initial
copy icon
Value
0
copy icon
Optionally set an initial value for the input.

For example, setting a value of "100" will set the initial value of the input to "100". Setting a value of "0" will set the initial value to "0"

The default functionality is no initial value. By not adding this attribute on the input, the input will have no value.
Where?
Add to the element with fs-inputcounter-element = "input"
navigator arrow

Option

Show Arrows
Show the native browser up/down arrows inside the number input.
See how it works
see webflow attributes
Add this attribute
Description
Name
fs-inputcounter-showarrows
copy icon
Value
true
copy icon
By default, Attributes hides the native arrows inside the number input. This is to avoid two UI options for incrementing and decrementing the value.

To show the native number arrows, apply this attribute to the input.
Where?
Add to the element with fs-inputcounter-element = "input"

Apply native HTML number attributes

The browser native step, min and max HTML attributes are used instead of custom attributes for accessibility reasons.

navigator arrow

min

Minimum value of the input
See how it works
see webflow attributes
Add this attribute
Description
Name
min
copy icon
Value
0
copy icon
The minimum value that can be entered to the input.
Where?
Add to the element with fs-inputcounter-element = "input"
navigator arrow

max

Maximum value of the input
See how it works
see webflow attributes
Add this attribute
Description
Name
max
copy icon
Value
10
copy icon
The maximum value that can be entered to the input.
Where?
Add to the element with fs-inputcounter-element = "input"
navigator arrow

step

The amount of numbers counted per increment or decrement
See how it works
see webflow attributes
Add this attribute
Description
Name
step
copy icon
Value
2
copy icon
The "step" between each increment and decrement click.

For example, if step is set to 2, and the input is at 0, the first increment click will increase the input to 2. The second click will increase the value to 4. The third click will increase the value to 6.
Where?
Add to the element with fs-inputcounter-element = "input"

Working examples

See this solution working live in this Webflow project.

Example 1
Input Counter 1 - Default
Copy and paste this example inside Webflow Libraries
Go to Webflow Libraries
-
+
Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.

Developer documentation

external link icon

Next time implement inside Webflow

external link icon

Need help? Use the Automated Support Service

Subscribe

Sign up for future releases!

Thank you! Your submission has been received!
Oops! Something went wrong while submitting the form.