Format Number

<gstock-format-number> | GstockFormatNumber

Localization is handled by the browser’s Intl.NumberFormat API. No language packs are required. 

<gstock-format-number value="1000"></gstock-format-number>

<div class="playground-controls">
  <gstock-input type="number" value="1000" label="Value:" size="small"></gstock-input>

  <script type="module">
    const formatter = document.querySelector('gstock-format-number');
    const input = document.querySelector('gstock-input');

    input.addEventListener('gstock-input-event', () => (formatter.value = input.value || 0));
  </script>

  <style>
    .playground-controls gstock-input {
      margin-top: 2rem;
      max-width: 300px;
    }
  </style>
</div>

Percentages

To get the value as a percent, set the type attribute to percent. 

<gstock-format-number type="percent" value="0"></gstock-format-number>
<gstock-format-number type="percent" value="0.25"></gstock-format-number>
<gstock-format-number type="percent" value="0.50"></gstock-format-number>
<gstock-format-number type="percent" value="0.75"></gstock-format-number>
<gstock-format-number type="percent" value="1"></gstock-format-number>

Localization

Use the lang attribute to set the number formatting locale.

English: German: Russian: 
English: <gstock-format-number value="2000" lang="en" minimum-fraction-digits="2"></gstock-format-number>
German: <gstock-format-number value="2000" lang="de" minimum-fraction-digits="2"></gstock-format-number>
Russian: <gstock-format-number value="2000" lang="ru" minimum-fraction-digits="2"></gstock-format-number>

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. 

<gstock-format-number type="currency" currency="USD" value="2000" lang="en-US"></gstock-format-number>
<gstock-format-number type="currency" currency="GBP" value="2000" lang="en-GB"></gstock-format-number>
<gstock-format-number type="currency" currency="EUR" value="2000" lang="de"></gstock-format-number>
<gstock-format-number type="currency" currency="RUB" value="2000" lang="ru"></gstock-format-number>
<gstock-format-number type="currency" currency="CNY" value="2000" lang="zh-cn"></gstock-format-number>

Number format

Use the number-format attribute to customize the number format.

number-format Thousands separator Decimal separator Currency position Examples
#,###.## [,] [.] - 1,234.56
#.###,## [.] [,] - 1.234,56
# ###.## [ ] [.] - 1 234.56
# ###,## [ ] [,] - 1 234,56
#,###.## (#) [,] [.] left 1,234.56 €
#.###,## (#) [.] [,] left 1.234,56 ₽
# ###.## (#) [ ] [.] left 1 234.56 €
# ###,## (#) [ ] [,] left 1 234,56 €
(#)#,###.## [,] [.] right $1,234.56
(#)#.###,## [.] [,] right £1.234,56
(#)# ###.## [ ] [.] right ¥1 234.56
(#)# ###,## [ ] [,] right $1 234,56
#,###.## #.###,## # ###.## # ###,## #,###.## (#) #.###,## (#) # ###.## (#) # ###,## (#) (#)#,###.## (#)#.###,## (#)# ###.## (#)# ###,## 
<gstock-format-number currency="€" number-format="#.###,##" value="1234567.89"></gstock-format-number>

<div class="playground-controls">
  <gstock-select name="number-format" size="small" label="Number format:" value="#.###,##">
     <gstock-option value="#,###.##">#,###.##</gstock-option>
     <gstock-option value="#.###,##">#.###,##</gstock-option>
     <gstock-option value="#_###.##"># ###.##</gstock-option>
     <gstock-option value="#_###,##"># ###,##</gstock-option>
     <gstock-option value="#,###.##_(#)">#,###.## (#)</gstock-option>
     <gstock-option value="#.###,##_(#)">#.###,## (#)</gstock-option>
     <gstock-option value="#_###.##_(#)"># ###.## (#)</gstock-option>
     <gstock-option value="#_###,##_(#)"># ###,## (#)</gstock-option>
     <gstock-option value="(#)#,###.##">(#)#,###.##</gstock-option>
     <gstock-option value="(#)#.###,##">(#)#.###,##</gstock-option>
     <gstock-option value="(#)#_###.##">(#)# ###.##</gstock-option>
     <gstock-option value="(#)#_###,##">(#)# ###,##</gstock-option>
  </gstock-select>

  <script type="module">
    const formatNumber = document.querySelector('gstock-format-number');
    const numberFormat = document.querySelector('[name="number-format"]');

    numberFormat.addEventListener(
      'gstock-change-event',
      (event) => formatNumber.setAttribute("number-format", event.target.value.replaceAll("_", " ")),
    );
  </script>

  <style>
    .playground-controls gstock-select {
      margin-top: 2rem;
      max-width: 300px;
    }
  </style>
</div>