Skip to content

Latest commit

 

History

History
49 lines (38 loc) · 1.59 KB

overview.md

File metadata and controls

49 lines (38 loc) · 1.59 KB
Raw

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