Input Counter
The Counter allows a user to increase or decrease a numerical value.
Overview
The Input Counter component allows the user to input and displays a numerical value within a predetermined range. It typically consists of an input field and two buttons, one for increasing the value and one for decreasing it. The user can click on the buttons to increase or decrease the value or manually enter a new value into the input field.
The Input Counter component is often used in forms and other user interfaces where the user needs to input a specific numerical value within a specific range. It can be beneficial in scenarios where the user needs to input a value subject to certain constraints or limitations, as it allows them to increase or decrease the value within the allowed range quickly.
The Input Counter component may also include formatting options for the label text, or the ability to customize the range of allowable values.
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 then set the value to the specified minimum
Adding Interactions
Interactions define what will happen when users select an icon. You can find a list of interactions 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 |
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 |
Last updated