Input Counter

The Counter allows a user to increase or decrease a numerical value.

What the Avonni Input Counter does

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 value.

---

Changing the Properties

Changing the Type

The input counter can handle different number types. You can set your number type from number, 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. Constrains the decrementer to stop 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.

Here are the available Actions for the Input Counter component:

• On Change

The event is fired when the value changes.

---

Styling the Input Counter

From the Styles panel, you can customize styling attributes for the Input Counter:

• Header (label text)

You can find the instructions for styling here.

---

Examples

Property	Value
Label	Add a deposit amount
Variant	Standard
Type	Currency
Step	10
Min	10
Max	10,000
Style / Header Color	#107cad
Style / Font Size	16px
Style / Font Weight	500 - Medium

Specifications

Attributes

Name	Type	Description
disabled	Boolean	If present, the input field is disabled and users cannot interact with it.
fieldLevelHelp	String	Help text detailing the purpose and function of the input.
fractionDigits	Integer	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.
label	String	Text label for the input.
max	Integer	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.
min	Integer	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.
readOnly	Boolean	If present, the input field is read-only and cannot be edited by users.
required	Boolean	If present, the input field must be filled out before the form is submitted.
step	Integer	Amount to add or subtract from the value.
type	String	Input counter type. Valid values include number, currency and percent.
value	Integer	Specifies the value of an input element.
variant	String	The variant changes the appearance of an input field. Accepted variants include standard, label-inline, label-hidden, and label-stacked. This value defaults to standard, which displays the label above the field. Use label-hidden to hide the label but make it available to assistive technology. Use label-inline to horizontally align the label and input field. Use label-stacked to place the label above the input field.

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