Format Number
<sl-format-number> | SlFormatNumber
Formats a number using the specified locale and options.
Localization is handled by the browser’s
Intl.NumberFormat
API. No language packs are required.
<div class="format-number-overview">
<sl-format-number value="1000"></sl-format-number>
<br /><br />
<sl-input type="number" value="1000" label="Number to Format" style="max-width: 180px;"></sl-input>
</div>
<script>
const container = document.querySelector('.format-number-overview');
const formatter = container.querySelector('sl-format-number');
const input = container.querySelector('sl-input');
input.addEventListener('sl-input', () => (formatter.value = input.value || 0));
</script>
import { useState } from 'react';
import { SlFormatNumber, SlInput } from '@shoelace-style/shoelace/dist/react';
const App = () => {
const [value, setValue] = useState(1000);
return (
<>
<SlFormatNumber value={value} />
<br />
<br />
<SlInput
type="number"
value={value}
label="Number to Format"
style={{ maxWidth: '180px' }}
onSlInput={event => setValue(event.target.value)}
/>
</>
);
};
Examples
Percentages
To get the value as a percent, set the type
attribute to percent
.
<sl-format-number type="percent" value="0"></sl-format-number><br />
<sl-format-number type="percent" value="0.25"></sl-format-number><br />
<sl-format-number type="percent" value="0.50"></sl-format-number><br />
<sl-format-number type="percent" value="0.75"></sl-format-number><br />
<sl-format-number type="percent" value="1"></sl-format-number>
import { SlFormatNumber } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<>
<SlFormatNumber type="percent" value={0} />
<br />
<SlFormatNumber type="percent" value={0.25} />
<br />
<SlFormatNumber type="percent" value={0.5} />
<br />
<SlFormatNumber type="percent" value={0.75} />
<br />
<SlFormatNumber type="percent" value={1} />
</>
);
Localization
Use the lang
attribute to set the number formatting locale.
German:
Russian:
English: <sl-format-number value="2000" lang="en" minimum-fraction-digits="2"></sl-format-number><br />
German: <sl-format-number value="2000" lang="de" minimum-fraction-digits="2"></sl-format-number><br />
Russian: <sl-format-number value="2000" lang="ru" minimum-fraction-digits="2"></sl-format-number>
import { SlFormatNumber } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<>
English: <SlFormatNumber value="2000" lang="en" minimum-fraction-digits="2" />
<br />
German: <SlFormatNumber value="2000" lang="de" minimum-fraction-digits="2" />
<br />
Russian: <SlFormatNumber value="2000" lang="ru" minimum-fraction-digits="2" />
</>
);
Currency
To format a number as a monetary value, set the type
attribute to currency
and set
the currency
attribute to the desired ISO 4217 currency code. You should also specify
lang
to ensure the the number is formatted correctly for the target locale.
<sl-format-number type="currency" currency="USD" value="2000" lang="en-US"></sl-format-number><br />
<sl-format-number type="currency" currency="GBP" value="2000" lang="en-GB"></sl-format-number><br />
<sl-format-number type="currency" currency="EUR" value="2000" lang="de"></sl-format-number><br />
<sl-format-number type="currency" currency="RUB" value="2000" lang="ru"></sl-format-number><br />
<sl-format-number type="currency" currency="CNY" value="2000" lang="zh-cn"></sl-format-number>
import { SlFormatNumber } from '@shoelace-style/shoelace/dist/react';
const App = () => (
<>
<SlFormatNumber type="currency" currency="USD" value="2000" lang="en-US" />
<br />
<SlFormatNumber type="currency" currency="GBP" value="2000" lang="en-GB" />
<br />
<SlFormatNumber type="currency" currency="EUR" value="2000" lang="de" />
<br />
<SlFormatNumber type="currency" currency="RUB" value="2000" lang="ru" />
<br />
<SlFormatNumber type="currency" currency="CNY" value="2000" lang="zh-cn" />
</>
);
Importing
If you’re using the autoloader or the traditional loader, you can ignore this section. Otherwise, feel free to use any of the following snippets to cherry pick this component.
To import this component from the CDN using a script tag:
<script type="module" src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.6.0/cdn/components/format-number/format-number.component.js"></script>
To import this component from the CDN using a JavaScript import:
import 'https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.6.0/cdn/components/format-number/format-number.component.js';
To import this component using a bundler:
import '@shoelace-style/shoelace/dist/components/format-number/format-number.component.js';
To import this component as a React component:
import { SlFormatNumber } from '@shoelace-style/shoelace/dist/react';
Properties
Name | Description | Reflects | Type | Default |
---|---|---|---|---|
value
|
The number to format. |
number
|
0
|
|
type
|
The formatting style to use. |
'currency' | 'decimal' | 'percent'
|
'decimal'
|
|
noGrouping
no-grouping
|
Turns off grouping separators. |
boolean
|
false
|
|
currency
|
The ISO 4217 currency code to use when formatting. |
string
|
'USD'
|
|
currencyDisplay
currency-display
|
How to display the currency. |
'symbol' | 'narrowSymbol' | 'code' | 'name'
|
'symbol'
|
|
minimumIntegerDigits
minimum-integer-digits
|
The minimum number of integer digits to use. Possible values are 1–21. |
number
|
- | |
minimumFractionDigits
minimum-fraction-digits
|
The minimum number of fraction digits to use. Possible values are 0–20. |
number
|
- | |
maximumFractionDigits
maximum-fraction-digits
|
The maximum number of fraction digits to use. Possible values are 0–0. |
number
|
- | |
minimumSignificantDigits
minimum-significant-digits
|
The minimum number of significant digits to use. Possible values are 1–21. |
number
|
- | |
maximumSignificantDigits
maximum-significant-digits
|
The maximum number of significant digits to use,. Possible values are 1–21. |
number
|
- | |
updateComplete |
A read-only promise that resolves when the component has finished updating. |
Learn more about attributes and properties.