NumberFormat

Formats numbers for the current language.

128K bookmarks, rated 96.4% positive

Priced at CN¥1,280.00

<script setup lang="ts">
  import { NumberFormat, Stack, Text } from '@hina-ui/vue'
</script>

<template>
  <Stack class="max-w-sm">
    <Text>
      <NumberFormat :value="128456" format="compact" />
      bookmarks, rated
      <NumberFormat :value="0.964" format="percent" :precision="1" />
      positive
    </Text>
    <Text tone="muted">
      Priced at
      <NumberFormat :value="1280" format="currency" currency="CNY" />
    </Text>
  </Stack>
</template>

vue

Usage

import { NumberFormat } from '@hina-ui/vue'

value is the number to show. The component formats it for the current language and groups thousands by default.

1,234,567.891

<script setup lang="ts">
  import { NumberFormat } from '@hina-ui/vue'
</script>

<template>
  <NumberFormat :value="1234567.891" />
</template>

vue

Examples

Formats

Four of them. decimal is an ordinary number, compact abbreviates large values, percent shows a fraction as a percentage, and currency also requires a currency code.

decimal: 1,234,567
compact: 1.2M
percent: 86%
currency: CN¥1,234.50

<script setup lang="ts">
  import { DescriptionDetails, DescriptionList, DescriptionTerm, NumberFormat } from '@hina-ui/vue'
</script>

<template>
  <DescriptionList class="grid max-w-sm grid-cols-[6rem_1fr] gap-y-2 [&>dd]:m-0! [&>dt]:m-0!">
    <DescriptionTerm>decimal</DescriptionTerm>
    <DescriptionDetails><NumberFormat :value="1234567" /></DescriptionDetails>
    <DescriptionTerm>compact</DescriptionTerm>
    <DescriptionDetails><NumberFormat :value="1234567" format="compact" /></DescriptionDetails>
    <DescriptionTerm>percent</DescriptionTerm>
    <DescriptionDetails><NumberFormat :value="0.8642" format="percent" /></DescriptionDetails>
    <DescriptionTerm>currency</DescriptionTerm>
    <DescriptionDetails>
      <NumberFormat :value="1234.5" format="currency" currency="CNY" />
    </DescriptionDetails>
  </DescriptionList>
</template>

vue

Decimal places

precision caps how many decimal places are shown; missing places are not padded with zeros.

Default: 3.142

precision of 2: 3.14

precision of 0: 3

<script setup lang="ts">
  import { NumberFormat, Stack, Text } from '@hina-ui/vue'
</script>

<template>
  <Stack class="max-w-sm">
    <Text>
      Default:
      <NumberFormat :value="3.14159" />
    </Text>
    <Text>
      precision of 2:
      <NumberFormat :value="3.14159" :precision="2" />
    </Text>
    <Text>
      precision of 0:
      <NumberFormat :value="3.14159" :precision="0" />
    </Text>
  </Stack>
</template>

vue

Following the language

Output follows the language provided through provideUiLocale. The same number is grouped by ten thousands in Simplified Chinese and by thousands in English.

Simplified Chinese: 1.2M

English： 1.2M

<script setup lang="ts">
  import { NumberFormat, Stack, Text, enUS, provideUiLocale } from '@hina-ui/vue'
  import { defineComponent, h } from 'vue'

  const English = defineComponent({
    setup(_, { slots }) {
      provideUiLocale(enUS)
      return () => h('span', slots.default?.())
    },
  })
</script>

<template>
  <Stack class="max-w-sm">
    <Text>
      Simplified Chinese:
      <NumberFormat :value="1234567" format="compact" />
    </Text>
    <Text>
      English：
      <English><NumberFormat :value="1234567" format="compact" /></English>
    </Text>
  </Stack>
</template>

vue

Invalid values

When value is null, NaN or infinite, a dash is shown instead of rendering NaN.

Value is null: —

Value is NaN: —

<script setup lang="ts">
  import { NumberFormat, Stack, Text } from '@hina-ui/vue'
</script>

<template>
  <Stack class="max-w-sm">
    <Text>
      Value is null:
      <NumberFormat :value="null" />
    </Text>
    <Text>
      Value is NaN:
      <NumberFormat :value="Number.NaN" />
    </Text>
  </Stack>
</template>

vue

Behaviour

The compact format keeps the full number in title, so hovering reveals the unabbreviated value.
Without a currency code the currency format falls back to decimal and warns in development.

API

Props

Prop	Type	Default	Description
`value`	`number \| null`	—	The number to show
`format`	`'decimal' \| 'compact' \| 'percent' \| 'currency'`	`'decimal'`	Output format
`currency`	`string`	—	Currency code, required by `currency`
`precision`	`number`	—	Maximum number of decimal places
`class`	`string`	—	Classes appended to the root