<arc-number-format> Overview
Guidelines
When to use
- Use in tables and stat cards where numbers need to align vertically
- Set type="currency" with the appropriate currency code for financial data
- Use notation="compact" for large numbers in space-constrained layouts
- Pair with AnimatedNumber for values that change over time
- Set locale explicitly when building multi-language applications
When not to use
- Use for animated counting effects — use AnimatedNumber instead
- Wrap in additional monospace styling — the component already uses tabular-nums
- Pass 0.5 for 50% — the percent type expects the actual percentage value (50)
- Forget to set the currency prop when using type="currency" in non-USD contexts
Features
- Locale-aware formatting via Intl.NumberFormat for numbers, currency, percent, and compact notation
- Tabular nums and monospace font for vertical alignment in grids and tables
- Compact notation renders "12.3K", "1.2M", "4.5B" for large numbers
- Percent type treats values as actual percentages (50 = 50%) for intuitive usage
- Configurable decimal places with sensible defaults per type
- Supports any BCP 47 locale and ISO 4217 currency code
- Minimal styling — inherits size and color from parent context
Preview
Number:
Currency:
Percent:
Compact:
Usage
<!-- Basic number with thousands separators -->
<arc-number-format value="1234567"></arc-number-format>
<!-- Currency -->
<arc-number-format value="1234.50" type="currency" currency="USD"></arc-number-format>
<!-- Percentage (50 = 50%) -->
<arc-number-format value="99.9" type="percent"></arc-number-format>
<!-- Compact notation -->
<arc-number-format value="1234567" notation="compact"></arc-number-format>
<!-- European locale -->
<arc-number-format value="1234.56" type="currency" currency="EUR" locale="de-DE"></arc-number-format>import { NumberFormat } from '@arclux/arc-ui-react';
function PricingTable({ price, change, users }) {
return (
<div>
<NumberFormat value={price} type="currency" />
<NumberFormat value={change} type="percent" />
<NumberFormat value={users} notation="compact" />
</div>
);
}<script setup>
import { NumberFormat } from '@arclux/arc-ui-vue';
const price = 1234.50;
const change = 12.5;
</script>
<template>
<NumberFormat :value="price" type="currency" />
<NumberFormat :value="change" type="percent" />
</template><script>
import { NumberFormat } from '@arclux/arc-ui-svelte';
let price = 1234.50;
let change = 12.5;
</script>
<NumberFormat value={price} type="currency" />
<NumberFormat value={change} type="percent" />import { Component } from '@angular/core';
import { NumberFormat } from '@arclux/arc-ui-angular';
@Component({
imports: [NumberFormat],
template: `
<NumberFormat [value]="price" type="currency" />
<NumberFormat [value]="change" type="percent" />
`,
})
export class MetricsComponent {
price = 1234.50;
change = 12.5;
}import { NumberFormat } from '@arclux/arc-ui-solid';
function Metrics() {
return (
<div>
<NumberFormat value={1234.50} type="currency" />
<NumberFormat value={12.5} type="percent" />
</div>
);
}import { NumberFormat } from '@arclux/arc-ui-preact';
function Metrics() {
return (
<div>
<NumberFormat value={1234.50} type="currency" />
<NumberFormat value={12.5} type="percent" />
</div>
);
}API
| Prop | Type | Default | Description |
|---|---|---|---|
value | number | 0 | The number to format |
type | 'number' | 'currency' | 'percent' | 'compact' | 'number' | Formatting style to apply |
locale | string | 'en-US' | BCP 47 locale tag for locale-aware formatting |
currency | string | 'USD' | ISO 4217 currency code, used when type is "currency" |
decimals | number | auto | Number of decimal places (defaults: 0 for number, 2 for currency, 1 for percent) |
notation | 'standard' | 'compact' | 'standard' | Number notation — compact gives "12.3K", "1.2M" |