---
meta:
title: Format Number
description: Formats a number using the specified locale and options.
layout: component
---
Localization is handled by the browser's [`Intl.NumberFormat` API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat). No language packs are required.
```html:preview
```
{% raw %}
```jsx:react
import { useState } from 'react';
import SlFormatNumber from '@shoelace-style/shoelace/dist/react/format-number';
import SlInput from '@shoelace-style/shoelace/dist/react/input';
const App = () => {
const [value, setValue] = useState(1000);
return (
<>
setValue(event.target.value)}
/>
);
};
```
{% endraw %}
## Examples
### Percentages
To get the value as a percent, set the `type` attribute to `percent`.
```html:preview
```
```jsx:react
import SlFormatNumber from '@shoelace-style/shoelace/dist/react/format-number';
const App = () => (
<>
);
```
### Localization
Use the `lang` attribute to set the number formatting locale.
```html:preview
English:
German:
Russian:
```
```jsx:react
import SlFormatNumber from '@shoelace-style/shoelace/dist/react/format-number';
const App = () => (
<>
English:
German:
Russian:
);
```
### 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.
```html:preview
```
```jsx:react
import SlFormatNumber from '@shoelace-style/shoelace/dist/react/format-number';
const App = () => (
<>
);
```