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
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
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
change
The event fired when the value changes.
Styling Hooks
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
Last updated
