> For the complete documentation index, see [llms.txt](https://docs.avonnicomponents.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.avonnicomponents.com/flow/flow-components/input-counter.md).
# Input Counter
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
Property
Value
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 with `objectApiName`, `selectedFields`, and an `aggregateFunction` (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.
* **Prefix** — text shown before the value. Requires **Mode** = **Button**.
* **Suffix** — text shown after the value. Requires **Mode** = **Button**.
* **Hide Value** — hides the value display, leaving only the increment and decrement controls. Requires **Mode** = **Button**.
* **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., `2` formats as `1,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](/flow/component-builder/interactions-panel.md) 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.
| Output variable | Type | What it returns |
| --------------- | ------- | ----------------------------------------------------------------------------------------------------------------------------- |
| **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.
{% tabs %}
{% tab title="Margin" %}
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.
{% endtab %}
{% tab title="Padding" %}
Controls the *inner* spacing between the component's content and its border.
* **Top / Right / Bottom / Left:** Adjust the inner spacing on each side.
{% endtab %}
{% tab title="Size" %}
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.
{% endtab %}
{% tab title="Border" %}
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.
{% endtab %}
{% tab title="Background" %}
Sets the component's background.
* **Color:** Set the background color.
{% endtab %}
{% tab title="Label" %}
Styles the field label above the counter.
* **Color:** Set the label text color.
* **Font Size / Font Style / Font Weight:** Control the label typography.
{% endtab %}
{% tab title="Input" %}
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.
{% endtab %}
{% tab title="Decrement Button Icon" %}
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.
{% endtab %}
{% tab title="Increment Button Icon" %}
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.
{% endtab %}
{% tab title="Prefix" %}
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.
{% endtab %}
{% tab title="Value" %}
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.
{% endtab %}
{% tab title="Suffix" %}
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.
{% endtab %}
{% tab title="Decrement Button" %}
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.
{% endtab %}
{% tab title="Increment Button" %}
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.
{% endtab %}
{% endtabs %}
---
# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.
## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.
Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:
```
GET https://docs.avonnicomponents.com/flow/flow-components/input-counter.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.
Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.