fs-inputcounter

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

Overview

The fs-inputcounter attribute creates a number input with custom increment and decrement buttons, allowing users to adjust numeric values with button clicks instead of typing.

Attribute Syntax

The attribute uses the following syntax:

fs-inputcounter-element="[element-type]"
fs-inputcounter-[setting]="[value]"

Elements

input

Defines the input element that will display the numeric value.

<input 
  type="number" 
  fs-inputcounter-element="input"
>

increment

Defines a button that increases the input value.

<button fs-inputcounter-element="increment">+</button>

decrement

Defines a button that decreases the input value.

<button fs-inputcounter-element="decrement">-</button>

clear

Defines a button that resets the input to its initial value.

<button fs-inputcounter-element="clear">Reset</button>

style

Defines the stylesheet element that contains CSS to hide the native number input arrows (spinners).

<style fs-inputcounter-element="style"></style>

Settings

initial

Defines the initial value for the numeric input.

<input 
  type="number"
  fs-inputcounter-element="input"
  fs-inputcounter-initial="0"
>

showarrows

Defines if the native number input arrows (spinners) should be displayed. By default, arrows are hidden.

<input 
  type="number"
  fs-inputcounter-element="input"
  fs-inputcounter-showarrows="true"
>

Usage Examples

Basic Counter

<div class="counter-component">
  <button fs-inputcounter-element="decrement">-</button>
  
  <input 
    type="number"
    fs-inputcounter-element="input"
    fs-inputcounter-initial="1"
    min="0"
    max="10"
  >
  
  <button fs-inputcounter-element="increment">+</button>
</div>

How It Works

1. Identifies input with the input element attribute
2. Finds increment/decrement buttons in the same instance
3. Hides native arrows unless showarrows is set to true
4. Sets initial value if specified
5. Handles button clicks to increment or decrement the value
6. Respects constraints like min, max, and step attributes
7. Provides reset functionality via the clear button

Instance Grouping

To create multiple independent counters on the same page, use instance numbers:

<div fs-inputcounter="1">
  <!-- Counter 1 elements -->
</div>

<div fs-inputcounter="2">
  <!-- Counter 2 elements -->
</div>

Accessibility

The attribute includes built-in accessibility features:

• Maintains proper ARIA attributes
• Respects keyboard navigation
• Works with screen readers
• Supports standard HTML input constraints

Use type="button" on increment/decrement buttons inside forms to prevent them from submitting the form.

The input is automatically set to type="number" when the attribute initializes, ensuring proper numeric input behavior.

Native Arrow Hiding

By default, the attribute hides native browser spinner arrows with the following CSS:

/* Chrome, Safari, Edge, Opera */
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Firefox */
input[type='number'] {
  -moz-appearance: textfield;
}

This stylesheet is automatically injected unless showarrows="true" is set.