Component

DataNumber

Published on

Description

The DataNumber component formats numeric values using Intl.NumberFormat, supporting locale-aware decimal separators, currency, and percentage styles.

Use DataNumber for displaying prices, statistics, or any numeric value that benefits from locale-aware formatting. For file sizes, use DataBytes instead.

Example

Open in new tab
View HTML markup 
  <p><data value="1234.56">1,234.56</data></p>
<p><data value="1000000">1,000,000</data></p>
<p><data value="0.125" style="percent">13%</data></p>
<p><data value="99.99" style="currency">$99.99</data></p>

Accessibility

  • Renders as a <data> element with the raw value preserved in the value attribute
  • Screen readers announce the formatted number text
  • Supports Intl.NumberFormat options like style, currency, and minimumFractionDigits

Variables

None