Comment on page

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

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

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.

Name	Description
change	The event fired when the value changes.

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 modified 11mo ago