Skip to main content
Skip to main content

Input - Currency

A currency input is a single-line text field with behaviors to support currency functionality.

Code documentation

Web

Anatomy

The number input component is made up of 11 elements.

Anatomy diagram numbering 11 elements of a currency input.
  1. Label
  2. Optional indicator
  3. Clear button
  4. Right slot
  5. Suffix
  6. Value
  7. Prefix
  8. Left slot
  9. Helper text
  10. Required indicator
  11. Error text

Variants

Currency input extends the input component which allows for the use of its properties, events, slots, methods, and styles. Refer to the input documentation for detailed information on these features.

The following variants are unique features to currency input.

Commas

By default, currency inputs automatically format the value to separate groups of thousands with a comma. The commas can not be manually deleted or repositioned within the value.

A currency input displays the amount $1,000,000 as the value with commas separating the thousands place.

Commas can be hidden if needed. When hidden, the value will display without any thousands separators.

A currency input displays the amount $1,000,000 as the value with no commas separating the thousands place.

Decimals

The currency input also automatically displays decimals up to the hundredths place by default. The decimals can not manually be edited. If a whole number is passed into the value, two zeros will display to the right of the decimal.

Two currency inputs display decimal usage. The top input has the amount $1,987,654.32 including the decimal point. The bottom input has the amount $6,874. Two zeros are added to the right of the decimal.

When hidden, the whole number is displayed. If a value has a decimal and the property changes to hide the decimal, the decimal remains in the value until manually removed.

A currency input displays the amount $1,987,654. No decimal point or decimal values are displayed.

Minimum value

A minimum value can be set for the currency input. The limit is not inherently enforced by the input and should be handled by the user. The following example shows how a minimum value can be incorporated as part of a broader validation effort.

A currency input displays $10 as the value. The input is in an invalid state and displays a message that indicates the minimum amount is $25.

Maximum value

A maximum value can be set for the currency input. The limit is not inherently enforced by the input and should be handled by the user. The following example shows how a maximum value can be incorporated as part of a broader validation effort.

A currency input displays $1,000 as the value. The input is in an invalid state and displays a message that indicates the maximum amount is $500.

Prefix

The currency input uses the base input’s prefix property to display currency symbols. The dollar symbol ($) is displayed by default, but may be customized.

Two currency inputs display prefix usage. The top input includes a dollar symbol in the prefix. The bottom input includes a Japanese yen symbol in the prefix.

Suffix

The currency input can also use the base input’s suffix property to display currency codes. The suffix value is empty by default.

Two currency inputs display suffix usage. The top input includes the USD currency code in the suffix. The bottom input includes the JPY currency code in the suffix.