Input Counter
The Input Counter component provides a user-friendly way to enter numbers within a specific range. It's like a mini calculator with an input field and two buttons: one to increase and decrease the val
The Input Counter lets users enter or adjust a numeric value using increment and decrement buttons. It supports number, currency, and percent formatting, configurable min/max bounds, and two display modes — a standard input field or a button-only control.
Overview
Label
Add a deposit amount
Variant
Standard
Type
Currency
Step
10
Min
10
Max
10,000
Style / Header Color
#107cad
Style / Header Font Size
16px
Style / Header Font Weight
500 - Medium
Configuration
To configure it, click the component on the Flow screen. The Edit Counter Component panel opens on the right with three tabs: Properties, Interactions, and Style. The sections below mirror the Properties tab.
Properties
Label — text label displayed above the counter.
Value — the initial value when the screen loads. Defaults to
0. You can also connect a query directly — set it to an object withobjectApiName,selectedFields, and anaggregateFunction(SUM, COUNT, AVG, MIN, MAX) to display a live calculated value.Mode — controls how the counter is displayed:
Input (default) — a standard number input field with increment/decrement buttons on either side.
Button — button-only mode. The increment and decrement actions are the primary controls, with the value displayed between them (or hidden if Hide Value is enabled). In this mode, Prefix and Suffix text can be shown around the value.
Type — the numeric format: Number, Currency, or Percent.
Step — the amount added or subtracted on each increment or decrement click.
Fraction Digits — number of decimal digits to display (e.g.,
2formats as1,234.56).Min — minimum acceptable value. The decrement button stops at this value. If a user types a lower value, it snaps to the minimum.
Max — maximum acceptable value. The increment button stops at this value. If a user types a higher value, it snaps to the maximum.
Variant — label placement: Standard, Label Hidden, Label Inline, or Label Stacked.
Required — marks the field as mandatory.
Read Only — the counter is visible but the user cannot change the value.
Disabled — greys out the component and prevents interaction.
Field Level Help — optional tooltip text shown next to the label.
Buttons
The Buttons group appears when Mode is set to Button and provides full customization of the decrement and increment controls:
Decrement Button — configure its label, icon name, icon position, and variant.
Increment Button — configure its label, icon name, icon position, and variant.
Interactions
Interactions define what happens when users interact with the Counter. Configure them from the Interactions tab of the Edit Counter panel.
Change
Fires when the counter value changes, whether the user types directly into the field or clicks the increment or decrement buttons. Use this to update another component, store the new value, or drive conditional logic downstream.
Output Variables
The Input Counter exposes its current value as an output variable you can reference in your flow after the screen. To use it, select the screen element in Flow Builder, then the Input Counter component.
Value
Integer
The current counter value. This reflects the number the user set using the increment/decrement buttons or by typing directly.
Example: A product order flow uses an Input Counter for quantity selection. After the screen, use Value to multiply by the unit price and calculate the order total in an Assignment element.
Styling
The Style tab lets you fine-tune the Input Counter's spacing, the field appearance, and each of its parts. Some sections appear only when the matching part is displayed. Configure it from the Style tab of the Edit panel.
Controls the outer spacing around the component, creating space between it and other elements on the screen.
Top / Right / Bottom / Left: Adjust the space on each side.
Controls the inner spacing between the component's content and its border.
Top / Right / Bottom / Left: Adjust the inner spacing on each side.
Controls the component's dimensions.
Width / Height: Set fixed dimensions for the component.
Min Width / Max Width / Min Height / Max Height: Constrain the size within bounds.
Overflow: Control how content that exceeds the bounds is handled.
Customizes the border surrounding the component.
Color: Set the border color.
Size: Adjust the border thickness.
Style: Choose a border style (e.g. solid, dashed, dotted).
Radius: Control the roundness of the corners.
Sets the component's background.
Color: Set the background color.
Styles the field label above the counter.
Color: Set the label text color.
Font Size / Font Style / Font Weight: Control the label typography.
Styles the numeric input field.
Background Color / Text Color: Set the field colors.
Border Color / Border Size / Border Style / Border Radius: Customize the field border.
Styles the decrement button when shown as an icon button (no button variant set).
Background Color: Set the background, with default, active, and hover states.
Icon Color: Set the icon color, with default, active, and hover states.
Border Color: Set the border color, with default, active, and hover states.
Styles the increment button when shown as an icon button (no button variant set).
Background Color: Set the background, with default, active, and hover states.
Icon Color: Set the icon color, with default, active, and hover states.
Border Color: Set the border color, with default, active, and hover states.
Styles the prefix text shown before the value (when displayed).
Color: Set the prefix text color.
Font Size / Font Style / Font Weight: Control the prefix typography.
Styles the displayed value (when displayed).
Color: Set the value text color.
Font Size / Font Style / Font Weight: Control the value typography.
Minimum Width: Reserve a minimum width for the value.
Styles the suffix text shown after the value (when displayed).
Color: Set the suffix text color.
Font Size / Font Style / Font Weight: Control the suffix typography.
Styles the decrement button when a button variant is set. (set per variant.)
Background Color: Set the background, with default, active, and hover states.
Text/Icon Color: Set the text and icon color, with default, active, and hover states.
Border Color: Set the border color, with default, active, and hover states.
Border Size / Border Style / Border Radius: Customize the button border.
Styles the increment button when a button variant is set. (set per variant.)
Background Color: Set the background, with default, active, and hover states.
Text/Icon Color: Set the text and icon color, with default, active, and hover states.
Border Color: Set the border color, with default, active, and hover states.
Border Size / Border Style / Border Radius: Customize the button border.
Last updated
Was this helpful?