> 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/dynamic-components/components/counter.md). # 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. ## Overview 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. ## Configuration 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. ### Properties The Properties tab is a single list of settings that define the Counter's label, value, behavior, and limits. #### Label Set the **Label** that appears above the input. This is required and tells users what the counter controls (for example, "Quantity" or "Score"). #### Prefix Add text displayed before the value, such as a currency symbol or unit. *Requires:* **Mode** = **Button**. #### Value 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. #### Suffix Add text displayed after the value, such as a unit label. *Requires:* **Mode** = **Button**. #### Mode Choose how users interact with the counter: * **Input (Default):** A standard number field where users can type a value or use the stepper. * **Button:** A button-based control with a value display, plus the optional prefix, suffix, and **Buttons** styling section described below. #### Hide Value When enabled, hides the value display so only the increment/decrement buttons are shown. *Requires:* **Mode** = **Button**. #### Field Level Help 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"). #### Variant Pick a visual style that controls how the label is placed relative to the input: * **Standard (Default):** The label sits above the input. * **Label Hidden:** The label is hidden for a cleaner, more compact look. * **Label Inline:** The label sits to the left of the input. * **Label Stacked:** The label starts atop the input. #### Type Choose how the value is formatted: * **Number (Default):** A plain numeric value. * **Currency:** Formats the value as a currency amount. * **Percent:** Formats the value as a percentage. #### Step 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. #### Fraction Digits Control the number of decimal places shown (for example, `2` for values like `10.25`). Leave it blank for whole numbers. #### Min Set the lowest value users can enter (for example, `0` to prevent negatives). You can also derive the minimum from a query. #### Max Set the highest value users can enter (for example, `100` to cap the count). You can also derive the maximum from a query. #### Required Enable this if users must enter a value before the form can be submitted. #### Read Only Found under **Advanced**. When enabled, the value is displayed but cannot be edited by users. #### Disabled Found under **Advanced**. When enabled, the field is disabled and users cannot interact with it. ### Buttons 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: * **Label:** Optional text shown on the button. * **Icon Name:** The button icon. The decrement button defaults to `utility:ban` and the increment button to `utility:new`. * **Icon Position:** Whether the icon appears to the **Left** (default) or **Right** of the label. Available once a button label is set. * **Variant:** The button's visual style — Base, Bare, Bare Inverse, Border (default), Border Filled, Border Inverse, Brand, Brand Outline, Container, Destructive, Destructive Text, Inverse, Neutral, or Success. ### Set Component Visibility All components support conditional visibility — see [Component Visibility](/dynamic-components/core-concepts/component-visibility.md). ## Interactions [Interactions](/dynamic-components/component-builder/interactions.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'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. ## Styling The Avonni Counter offers styling options to help it fit into your design. Configure them from the **Style** tab of the Edit Counter panel. {% tabs %} {% tab title="Margin" %} Controls the *outer* spacing around the counter. * **Top / Right / Bottom / Left:** Adjust the space on each side. {% endtab %} {% tab title="Padding" %} Controls the *inner* spacing between the counter's content and its border. * **Top / Right / Bottom / Left:** Adjust the inner spacing on each side. {% endtab %} {% tab title="Size" %} Controls the counter's dimensions. * **Width / Height:** Set fixed dimensions. * **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 counter. * **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="Label" %} Styles the label text shown above the input. * **Color:** Set the label text color. * **Font Size / Font Style / Font Weight:** Control the label typography. {% endtab %} {% tab title="Input" %} Styles the input field (Input mode). * **Background Color / Text Color:** Set the input fill and text colors. * **Border Color / Border Size / Border Style / Border Radius:** Customize the input border. {% endtab %} {% tab title="Value" %} Styles the value display. * **Color:** Set the value text color. * **Font Size / Font Style / Font Weight:** Control the value typography. * **Minimum Width:** Set a minimum width for the value display. {% endtab %} {% tab title="Prefix" %} Styles the prefix text shown before the value. * **Color:** Set the prefix text color. * **Font Size / Font Style / Font Weight:** Control the prefix typography. {% endtab %} {% tab title="Suffix" %} Styles the suffix text shown after the value. * **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 (in **Button** mode it also includes border properties; in **Input** mode the icon-only variant is styled). * **Background Color:** Default, active, and hover states. * **Text/Icon Color:** Default, active, and hover states. * **Border Color:** Default, active, and hover states. * **Border Size / Style / Radius:** Available in **Button** mode. {% endtab %} {% tab title="Increment Button" %} Styles the increment button (in **Button** mode it also includes border properties; in **Input** mode the icon-only variant is styled). * **Background Color:** Default, active, and hover states. * **Text/Icon Color:** Default, active, and hover states. * **Border Color:** Default, active, and hover states. * **Border Size / Style / Radius:** Available in **Button** mode. {% 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/dynamic-components/components/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.