lunaDOM Docs
lunaDOM Docs

lunaDOM is a collection of lightweight, accessible shadowdom based web components built with JavaScript.

v0.0.25

The <luna-format-number> component formats numeric values using the browser's native Intl.NumberFormat API with automatic locale detection.

Paths

/lunadom/components/format-number/format-number.js REQUIRED

Basic Decimal Formatting

Price:

Large number:

Small number:

Currency Formatting

US Dollars:

Euros:

British Pounds:

Japanese Yen:

Currency Display Styles

Symbol:

Code:

Name:

Percentage Formatting

Success rate:

Growth:

Completion:

Unit Formatting

Speed:

Temperature:

Distance:

Weight:

Volume:

Unit Display Styles

Short:

Long:

Narrow:

Precision Control

Default:

Min 2, Max 2:

No decimals:

High precision:

Compact Notation

1 thousand:

1 million:

1 billion:

1 trillion:

Compact Display Styles

Short:

Long:

Scientific Notation

Large:

Small:

Sign Display

Auto (negative only): /

Always: /

Except zero: /

No Grouping

With grouping:

Without grouping:

Real-World Examples

E-commerce Product

Price:

Discount:

Weight:

Analytics Dashboard

Total users:

Conversion rate:

Revenue:

Customization

Attributes
value - Number to format (required)
type - Format type (decimal, currency, percent, unit, default: "decimal")
currency - ISO 4217 currency code (e.g., "USD", "EUR", "GBP")
currency-display - Currency label style (symbol, narrowSymbol, code, name, default: "symbol")
unit - Physical unit identifier (e.g., "kilometer-per-hour", "celsius")
unit-display - Unit label style (long, short, narrow, default: "short")
min-fraction-digits - Minimum decimal places
max-fraction-digits - Maximum decimal places
no-grouping - Disable thousands separator
notation - Number notation (standard, scientific, engineering, compact, default: "standard")
compact-display - Compact suffix length (short, long, default: "short")
sign-display - Sign visibility (always, exceptZero, never, auto, default: "auto")

Example Code

<!-- Basic decimal --> <luna-format-number value="1234.56"></luna-format-number> <!-- Currency --> <luna-format-number value="1234.56" type="currency" currency="USD" ></luna-format-number> <!-- Percentage --> <luna-format-number value="0.875" type="percent"></luna-format-number> <!-- Unit --> <luna-format-number value="120" type="unit" unit="kilometer-per-hour" ></luna-format-number> <!-- Compact notation --> <luna-format-number value="1200000" notation="compact" ></luna-format-number> <!-- Scientific notation --> <luna-format-number value="123456789" notation="scientific" ></luna-format-number> <!-- Precision control --> <luna-format-number value="1234.567" max-fraction-digits="2" ></luna-format-number> <!-- Sign display --> <luna-format-number value="42" sign-display="always" ></luna-format-number> <!-- No grouping --> <luna-format-number value="1234567" no-grouping ></luna-format-number> <!-- Dynamic value --> <luna-format-number id="price" value="0"></luna-format-number> <script> const formatter = document.getElementById('price'); formatter.setAttribute('value', '1234.56'); formatter.setAttribute('type', 'currency'); formatter.setAttribute('currency', 'USD'); </script>