lightdarkdefaultcompact
Getting StartedInstallationChangelogSupportGithubFrameworksAngularVueReactDemosFoundationThemesInternationalizationTypographyIconsPopoversLayoutGetting StartedBlockInlineGridComponentsAccordionAlertAlert GroupBadgeBreadcrumbButtonButton GroupButton ExpandButton HandleButton IconButton ResizeButton SortCardChatCheckboxColorData GridDateDialogDividerDrawerDropdownFileFormat DatetimeFormat NumberFormsForm InteractionsForm ValidationHeaderInputMenuMonthNavPaginationPasswordProgress BarProgress CircleProgress DotRadioRangeRatingSearchSelectStepperSwitchTabsTagTextareaTimeToastToggletipTooltipTreeData GridGetting StartedFooterPlaceholderAsyncResponsiveHeightPaginationBordersHoverLayerRange SelectionCSVColumn AlignmentColumn WidthColumn FixedColumn StickyColumn VisibilityColumn GroupsColumn SpanColumn ResizeDraggable ColumnsDraggable RowsRow HeaderRow Multi SelectRow Single SelectRow HeightRow ActionRow Action BulkRow StickyRow StripeRow FixedRow SortRow Groups

Format Number

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

Example

1234567123.4567123.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

12345.6712345.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

test some text1234567test some text

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

<p bp-text="body">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

NameTypesDescription
format'currency' | 'decimal' | 'percent'
currencystring
localesstring[]
currencySign'standard' | 'accounting'
currencyDisplay'symbol' | 'code' | 'name'
compactDisplay'short' | 'long'
unitDisplay'long' | 'short' | 'narrow'
notation'standard' | 'scientific' | 'engineering' | 'compact'
signDisplay| 'auto' | 'never' | 'always' | 'exceptZero'

Attributes

NameTypesDescription
format'currency' | 'decimal' | 'percent'
currencystring
localesstring[]
currency-sign'standard' | 'accounting'
currency-display'symbol' | 'code' | 'name'
compact-display'short' | 'long'
unit-display'long' | 'short' | 'narrow'
notation'standard' | 'scientific' | 'engineering' | 'compact'
sign-display| 'auto' | 'never' | 'always' | 'exceptZero'