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
Specifications
Attributes
Events
Styling Hooks
Last updated