Format Number

npm2.0.0

The format-datetime component is used to display numbers in a human-readable format. The element reflects the Intl.NumberFormat API.

Example

Formats and displays numbers with localization and formatting options.

1234567

123.4567

code

<script type="module">
  import '@blueprintui/components/include/format-number.js';
</script>

<div bp-layout="block gap:md">
  <bp-format-number>1234567</bp-format-number>

  <bp-format-number format="percent">123.4567</bp-format-number>

  <bp-format-number format="decimal">123.4567</bp-format-number>
</div>

Currency

Demonstrates currency formatting with different currency codes.

12345.67

code

<script type="module">
  import '@blueprintui/components/include/format-number.js';
</script>

<div bp-layout="block gap:md">
  <bp-format-number currency="USD">12345.67</bp-format-number>

  <bp-format-number currency="EUR">12345.67</bp-format-number>
</div>

Text

Demonstrates inline number formatting within text content.

test some text1234567test some text

code

<script type="module">
  import '@blueprintui/components/include/format-number.js';
</script>

<p bp-text="content">test some text <bp-format-number>1234567</bp-format-number> test some text</p>

Install

NPM

// npm package
import '@blueprintui/components/include/format-number.js';

CDN

<script type="module">
  import 'https://cdn.jsdelivr.net/npm/@blueprintui/components/include/format-number.js/+esm';
</script>

Accessibility

Number formats should be localized to the user's locale. The locale attribute can be used to set the locale. If no locale is provided, the user's locale will be used.

bp-format-number

Properties

Name	Types	Description
`format`	`'currency' \| 'decimal' \| 'percent'`	Defines the number formatting style, such as currency, decimal, or percent
`currency`	`string`	Specifies the currency code to use for currency formatting
`locales`	`string[]`	Specifies the locales to use for number formatting
`currencySign`	`'standard' \| 'accounting'`	Controls how to display the currency sign in accounting or standard format
`currencyDisplay`	`'symbol' \| 'code' \| 'name'`	Controls how the currency is displayed, as symbol, code, or name
`compactDisplay`	`'short' \| 'long'`	Controls how compact notation displays, using short or long forms
`unitDisplay`	`'long' \| 'short' \| 'narrow'`	Controls how units are displayed in formatted numbers
`notation`	`'standard' \| 'scientific' \| 'engineering' \| 'compact'`	Defines the number notation style, such as standard, scientific, or compact
`signDisplay`	`\| 'auto' \| 'never' \| 'always' \| 'exceptZero'`	Controls when to display the sign for positive and negative numbers

Attributes

Name	Types	Description
`format`	`'currency' \| 'decimal' \| 'percent'`	Defines the number formatting style, such as currency, decimal, or percent
`currency`	`string`	Specifies the currency code to use for currency formatting
`locales`	`string[]`	Specifies the locales to use for number formatting
`currency-sign`	`'standard' \| 'accounting'`	Controls how to display the currency sign in accounting or standard format
`currency-display`	`'symbol' \| 'code' \| 'name'`	Controls how the currency is displayed, as symbol, code, or name
`compact-display`	`'short' \| 'long'`	Controls how compact notation displays, using short or long forms
`unit-display`	`'long' \| 'short' \| 'narrow'`	Controls how units are displayed in formatted numbers
`notation`	`'standard' \| 'scientific' \| 'engineering' \| 'compact'`	Defines the number notation style, such as standard, scientific, or compact
`sign-display`	`\| 'auto' \| 'never' \| 'always' \| 'exceptZero'`	Controls when to display the sign for positive and negative numbers