# Format Number

> Source: https://design.nanatec.co.ke/components/format-number/
> Formats a number with `Intl.NumberFormat` — decimal, currency or percent, with optional compact notation (1K / 1M) and fixed precision.

Formats a number with `Intl.NumberFormat` — decimal, currency or percent, with optional compact notation (1K / 1M) and fixed precision.

## Preview

```html
<nana-format-number type="currency" value="1234.5" currency="USD"></nana-format-number>
```

## Installation

```bash
npm install @nana-tec/ui-components
```

## Import

```js
import "@nana-tec/ui-components/format-number";
```

## Basic usage

```html
<nana-format-number type="currency" value="1234.5" currency="USD"></nana-format-number>
```

## Examples

```html
<nana-format-number value="1234567.891" maximum-fraction-digits="2"></nana-format-number>
<nana-format-number value="1499.99" type="currency" currency="USD"></nana-format-number>
<nana-format-number value="0.4237" type="percent" maximum-fraction-digits="1"></nana-format-number>
<nana-format-number value="1500000" notation="compact"></nana-format-number>
```

## API

## Related components

<ul class="related not-content">
  <li><a href="/components/format-bytes/">Format Bytes</a></li>
  <li><a href="/components/format-date/">Format Date</a></li>
  <li><a href="/components/relative-time/">Relative Time</a></li>
</ul>

## Storybook

See every state and prop interactively in Storybook: https://storybook.nanatec.co.ke/?path=/docs/components-format-number--docs