Amount Input

An amount input component specific to a currency allows users to input and display monetary values in a particular currency format. It includes additional features and formatting options tailored to that currency, such as currency symbols, decimal separators, and precision.

Usage

Code Editor
Copy
import { AmountInput } from '@erudilabs/alma'

Types

Code Editor
Copy
import type { CurrencyProps } from '@erudilabs/alma'
CurrencyProps= 'RP' | 'PHP'

Component

Here preview and detail explain of Amount Input component


Default

Rp.
Code Editor
Copy
<AmountInput
  label="Amount"
  name="amount-id"
  currency="RP"
  placeholder="Enter your amount"
/>

₱
Code Editor
Copy
<AmountInput
  label="Amount"
  name="amount-ph"
  currency="PHP"
  placeholder="Enter your amount"
/>

Disabled

Rp.
Code Editor
Copy
<AmountInput
  label="Amount"
  name="amount-id-disabled"
  currency="RP"
  placeholder="Enter your amount"
  disabled
/>

Helper

₱

This field is using a helper text

Code Editor
Copy
<AmountInput
  label="Amount"
  name="amount-ph-helper"
  currency="PHP"
  placeholder="Enter your amount"
  helper="This field is using a helper text"
/>

Error

Rp.

An unexpected error occurred. Please try again later

Code Editor
Copy
<AmountInput
  label="Amount"
  name="amount-id-error"
  currency="RP"
  placeholder="Enter your amount"
  errorMessage="An unexpected error occurred. Please try again later"
/>

Max amount

Rp.
Code Editor
Copy
<AmountInput
  label="Amount"
  name="amount-id-max"
  currency="RP"
  placeholder="Enter your amount"
  max={1000000}
/>

Props Reference

Prop
Type

testId?

string

className?

string

label?

string

name

string

currency

CurrencyProps

helper?

ReactNode

max?

number

placeholder?

string

errorMessage?

string

defaultValue?

string

disabled?

boolean

onChange?

(e: ChangeEvent) => void

onBlur?

(e: FocusEvent) => void