Input Amount >> Overview ||10
A web component based on the generic text input field. Its purpose is to provide a way for users to fill in an amount.
For formatting, we use Intl NumberFormat with some overrides.
For parsing user input, we provide our own parser that takes into account a number of heuristics, locale and ignores invalid characters. Valid characters are digits and separators. Formatting happens on-blur.
If there are no valid characters in the input whatsoever, it will provide an error feedback.
import { html } from '@mdjs/mdjs-preview';
import '@lion/input-amount/define';
export const main = () => {
return html`
<lion-input-amount label="Amount" name="amount" currency="USD"></lion-input-amount>
`;
};
Features
- Based on our input
- Makes use of formatNumber for formatting and parsing.
- Option to show currency as a suffix
- Option to override locale to change the formatting and parsing
- Option to provide additional format options overrides
- Default label in different languages
- Can make use of number specific validators with corresponding error messages in different languages
- IsNumber (default)
- MinNumber
- MaxNumber
- MinMaxNumber
Installation
npm i --save @lion/input-amount
import { LionInputAmount } from '@lion/input-amount';
// or
import '@lion/input-amount/define';