# Input Counter

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FZrqdJnN8G5HFCKrojiYL%2Fimage%20(59).avif?alt=media&#x26;token=3863d959-fbb6-4f2e-8540-ea312d9e6064" alt="" width="375"><figcaption></figcaption></figure>

***

## Changing the Properties

### Changing the Type

The input counter can handle different number types. You can set your number type using numbers, currency, and percent.

### Specifying the step

The Step field allows entering a number that will add or subtract from the value.

### Defining Min and Max value

The minimum acceptable value for the input. It constrains the decrementer from stopping at the specified minimum. If an entered value is below the minimum, incrementing or decrementing will set the value to the specified minimum.

***

## Adding Interactions

Interactions define what happens when users select an icon. A list of interactions is available [here](https://docs.avonnicomponents.com/flow/component-builder/interactions-panel).

Here are the available Actions for the Input Counter component:

* `On Change`

The event is fired when the value changes.

***

## Output Variables

The Input Counter exposes output variables you can reference in your flow after the screen. To use them, select the screen element in Flow Builder, then the Input Counter component, and pick the output variable you need.

### Selected Value

| 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 Input Counter

From the Styles panel, you can customize styling attributes for the Input Counter:&#x20;

* Header (label text)

You can find the instructions for styling [here](https://docs.avonnicomponents.com/flow/component-builder/style-panel).

***

## Examples

<figure><img src="https://27923732-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F1FUd4apB9YHgCEMUFbVb%2Fuploads%2FCifCyctPkI7IjYkioknA%2F2022-10-20_15-01-07.png?alt=media&#x26;token=1d4eaffa-cefb-4548-92dd-1f3b862de6f2" alt=""><figcaption></figcaption></figure>

<table><thead><tr><th width="214">Property</th><th>Value</th></tr></thead><tbody><tr><td>Label</td><td>Add a deposit amount</td></tr><tr><td>Variant</td><td>Standard</td></tr><tr><td>Type</td><td>Currency</td></tr><tr><td>Step</td><td>10</td></tr><tr><td>Min</td><td>10</td></tr><tr><td>Max</td><td>10,000</td></tr><tr><td>Style / Header Color</td><td>#107cad</td></tr><tr><td>Style / Font Size</td><td>16px</td></tr><tr><td>Style / Font Weight</td><td>500 - Medium</td></tr></tbody></table>

## Specifications

### Attributes

<table><thead><tr><th width="202">Name</th><th width="199.75836972343524">Type</th><th>Description</th></tr></thead><tbody><tr><td>disabled</td><td>Boolean</td><td>If present, the input field is disabled and users cannot interact with it.</td></tr><tr><td>fieldLevelHelp</td><td>String</td><td>Help text detailing the purpose and function of the input.</td></tr><tr><td>fractionDigits</td><td>Integer</td><td>Granularity of the value - number of significant decimal digits specified as a positive integer. For example, 2 formats the value to 2 digits after the decimal.</td></tr><tr><td>label</td><td>String</td><td>Text label for the input.</td></tr><tr><td>max</td><td>Integer</td><td>The maximum acceptable value for the input. Constrains the incrementer to stop at the specified maximum. If the entered value is above the maximum, incrementing or decrementing will then set the value to the specified maximum.</td></tr><tr><td>min</td><td>Integer</td><td>The minimum acceptable value for the input. Constrains the decrementer to stop at the specified minimum. If an entered value is below the minimum, incrementing or decrementing will then set the value to the specified minimum.</td></tr><tr><td>readOnly</td><td>Boolean</td><td>If present, the input field is read-only and cannot be edited by users.</td></tr><tr><td>required</td><td>Boolean</td><td>If present, the input field must be filled out before the form is submitted.</td></tr><tr><td>step</td><td>Integer</td><td>Amount to add or subtract from the value.</td></tr><tr><td>type</td><td>String</td><td>Input counter type. Valid values include number, currency and percent.</td></tr><tr><td>value</td><td>Integer</td><td>Specifies the value of an input element.</td></tr><tr><td>variant</td><td>String</td><td>The variant changes the appearance of an input field. Accepted variants include <code>standard</code>, <code>label-inline</code>, <code>label-hidden</code>, and label-stacked. This value defaults to standard, which displays the label above the field. Use <code>label-hidden</code> to hide the label but make it available to assistive technology. Use <code>label-inline</code> to horizontally align the label and input field. Use <code>label-stacked</code> to place the label above the input field.</td></tr></tbody></table>

### Events

| Name   | Description                             |
| ------ | --------------------------------------- |
| change | The event fired when the value changes. |

### Styling Hooks

| Name        | Description                        |
| ----------- | ---------------------------------- |
| Text Color  | Define a text color for the label  |
| Font Size   | Define a font size for the label   |
| Font Style  | Define a font style for the label  |
| Font Weight | Define a font weight for the label |