Webflow Libraries component
Install Finsweet in Webflow Libraries
Copy this component inside Designer
Use this docs page to further customize
Scroll to docs
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.
Add this attribute
Description
Name
fs-inputcounter-element
Value
input
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.
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.
Add this attribute
Description
Name
fs-inputcounter-element
Value
increment
The increment (or plus) button.
Clicking this button will add (1) to the current input value.
Clicking this button will add (1) to the current input value.
Add this attribute
Description
Name
fs-inputcounter-element
Value
decrement
The decrement (or minus) button.
Clicking this button will subtract (1) from the current input value.
Clicking this button will subtract (1) from the current input value.
Add this attribute
Description
Name
fs-inputcounter-element
Value
clear
Optionally add a clear button that will "clear" the current value of the input.
The value will be set to the initial value.
The value will be set to the initial value.
Add this attribute
Description
Name
fs-inputcounter-initial
Value
0
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.
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"
Add this attribute
Description
Name
fs-inputcounter-showarrows
Value
true
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.
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.
Add this attribute
Description
Name
min
Value
0
The minimum value that can be entered to the input.
Where?
Add to the element with fs-inputcounter-element = "input"
Add this attribute
Description
Name
max
Value
10
The maximum value that can be entered to the input.
Where?
Add to the element with fs-inputcounter-element = "input"
Add this attribute
Description
Name
step
Value
2
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.
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"
Developer documentation
Check the dev documentation
Next time implement inside Webflow
Use Finsweet Extension
