lion/docs/components/input-amount/overview.md

parts	title	eleventyNavigation
Input Amount Overview	Input Amount: Overview	key order parent title Input Amount: Overview 10 Input Amount Overview

Input Amount: Overview

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 locale, a number of heuristics and allows for pasting amount strings like 'EUR 100,00'. 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/ui/define/lion-input-amount.js';

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/ui

import { LionInputAmount } from '@lion/ui/input-amount.js';
// or
import '@lion/ui/define/lion-input-amount.js';