Counter

The Avonni Counter component is a numeric input that lets users set a value either by typing or with increment/decrement buttons. Use it for quantities, scores, ratings, or any bounded number, with support for minimum and maximum limits, step size, decimal precision, and number, currency, or percent formatting.

The Counter works in two modes. In Input mode it behaves like a standard number field with optional stepper buttons. In Button mode it becomes a button-based control with a value display you can frame with prefix and suffix text. In both modes you can constrain the value with Min, Max, and Step, control decimal precision with Fraction Digits, and format the value as a number, currency, or percentage.

The sections below follow the configuration panel from top to bottom, so you can read along as you build.

To configure the Counter, select it on the canvas. The Edit Counter panel opens on the right with three tabs: Properties, Interactions, and Style. The sections below mirror the Properties tab.

The Properties tab is a single list of settings that define the Counter's label, value, behavior, and limits.

Set the Label that appears above the input. This is required and tells users what the counter controls (for example, "Quantity" or "Score").

Add text displayed before the value, such as a currency symbol or unit. Requires: Mode = Button.

Set the starting Value of the counter. The default is 0. You can bind it to a record field or, using query mode, derive it from an aggregate (SUM, COUNT, AVG, MIN, or MAX) over a Salesforce object.

Add text displayed after the value, such as a unit label. Requires: Mode = Button.

Choose how users interact with the counter:

When enabled, hides the value display so only the increment/decrement buttons are shown. Requires: Mode = Button.

Add help text that explains the purpose and function of the input. It appears as a tooltip next to the label (for example, "Enter a number between 0 and 100").

Pick a visual style that controls how the label is placed relative to the input:

Choose how the value is formatted:

Define the Step, the amount added or subtracted on each increment or decrement. The default is 1. Set it to 0.5, for example, for half-step increments.

Control the number of decimal places shown (for example, 2 for values like 10.25). Leave it blank for whole numbers.

Set the lowest value users can enter (for example, 0 to prevent negatives). You can also derive the minimum from a query.

Set the highest value users can enter (for example, 100 to cap the count). You can also derive the maximum from a query.

Enable this if users must enter a value before the form can be submitted.

Found under Advanced. When enabled, the value is displayed but cannot be edited by users.

Found under Advanced. When enabled, the field is disabled and users cannot interact with it.

The Buttons section becomes available when Mode is set to Button. It lets you customize the appearance of the increment and decrement buttons.

For each of the Decrement Button and Increment Button you can set:

All components support conditional visibility — see Component Visibility.

Interactions define what happens when users interact with the Counter. Configure them from the Interactions tab of the Edit Counter panel.

Fires when the counter's value changes, whether the user types a new number or clicks an increment or decrement button. Use it to run flow logic in response to the updated value — for example, recalculating a total, validating a threshold, or updating another field.

The Avonni Counter offers styling options to help it fit into your design. Configure them from the Style tab of the Edit Counter panel.