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

PropertyValue

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

NameTypeDescription

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

NameDescription

change

The event fired when the value changes.

Styling Hooks

NameDescription

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