# Format Number

URL: https://ark-ui.com/docs/utilities/format-number
LLM: https://ark-ui.com/llms.txt/utilities/format-number

Used to format numbers to a specific locale and options

---



## Usage

The number formatting logic is handled by the native `Intl.NumberFormat` API and smartly cached to avoid performance
issues when using the same locale and options.

```jsx
import { Format } from '@ark-ui/react'
```

## Examples

### Basic

Use the `Format.Number` component to format a number with default options.

```tsx
import { Format } from '@ark-ui/react/format'
import styles from 'styles/format.module.css'

export const NumberBasic = () => {
  return (
    <span className={styles.Value}>
      <Format.Number value={1450.45} />
    </span>
  )
}
```

### Percentage

Use the `style="percent"` prop to format the number as a percentage.

```tsx
import { Format } from '@ark-ui/react/format'
import styles from 'styles/format.module.css'

export const NumberWithPercentage = () => {
  return (
    <span className={styles.Value}>
      <Format.Number value={0.145} style="percent" maximumFractionDigits={2} minimumFractionDigits={2} />
    </span>
  )
}
```

### Currency

Use the `style="currency"` prop along with the `currency` prop to format the number as a currency.

```tsx
import { Format } from '@ark-ui/react/format'
import styles from 'styles/format.module.css'

export const NumberWithCurrency = () => {
  return (
    <span className={styles.Value}>
      <Format.Number value={1234.45} style="currency" currency="USD" />
    </span>
  )
}
```

### Locale

Use the `locale` prop to format the number according to a specific locale.

```tsx
import { Format } from '@ark-ui/react/format'
import { LocaleProvider } from '@ark-ui/react/locale'
import styles from 'styles/format.module.css'

export const NumberWithLocale = () => {
  return (
    <LocaleProvider locale="de-DE">
      <span className={styles.Value}>
        <Format.Number value={1450.45} />
      </span>
    </LocaleProvider>
  )
}
```

### Unit

Use the `style="unit"` prop along with the `unit` prop to format the number with a specific unit.

```tsx
import { Format } from '@ark-ui/react/format'
import styles from 'styles/format.module.css'

export const NumberWithUnit = () => {
  return (
    <span className={styles.Value}>
      <Format.Number value={384.4} style="unit" unit="kilometer" />
    </span>
  )
}
```

### Compact Notation

Use the `notation="compact"` prop to format the number in compact notation.

```tsx
import { Format } from '@ark-ui/react/format'
import styles from 'styles/format.module.css'

export const NumberWithCompact = () => {
  return (
    <div className={styles.Root}>
      <span className={styles.ValueLarge}>
        <Format.Number value={1500000} notation="compact" compactDisplay="short" />
      </span>
      <span className={styles.Label}>downloads per month</span>
    </div>
  )
}
```