DevExtreme v26.1 is now available.

Explore our newest features/capabilities and share your thoughts with us.

Your search did not match any results.

React Number Box - Formatting

Use the format property to specify the integer, currency, accounting, percent, and other formats of the NumberBox value.

Backend API
import React from 'react'; import NumberBox from 'devextreme-react/number-box'; const integerFormatLabel = { 'aria-label': 'Integer Format' }; const currencyFormatLabel = { 'aria-label': 'Currency Format' }; const accountingFormatLabel = { 'aria-label': 'Accounting Format' }; const percentFormatLabel = { 'aria-label': 'Percent Format' }; const fixedPointFormatLabel = { 'aria-label': 'Fixed Poing Format' }; const weightFormatLabel = { 'aria-label': 'Weight Format' }; function App() { return ( <div> <div className="dx-fieldset"> <div className="dx-field"> <div className="dx-field-label">Integer format</div> <div className="dx-field-value"> <NumberBox format="#" inputAttr={integerFormatLabel} defaultValue={14500} /> </div> </div> <div className="dx-field"> <div className="dx-field-label">Currency format</div> <div className="dx-field-value"> <NumberBox format="$ #,##0.##" inputAttr={currencyFormatLabel} defaultValue={14500.55} /> </div> </div> <div className="dx-field"> <div className="dx-field-label">Accounting format</div> <div className="dx-field-value"> <NumberBox format="$ #,##0.##;($ #,##0.##)" inputAttr={accountingFormatLabel} defaultValue={-2314.12} /> </div> </div> <div className="dx-field"> <div className="dx-field-label">Percent format</div> <div className="dx-field-value"> <NumberBox format="#0%" inputAttr={percentFormatLabel} defaultValue={0.15} step={0.01} /> </div> </div> <div className="dx-field"> <div className="dx-field-label">Fixed point format</div> <div className="dx-field-value"> <NumberBox format="#,##0.00" inputAttr={fixedPointFormatLabel} defaultValue={13415.24} /> </div> </div> <div className="dx-field"> <div className="dx-field-label">Weight format</div> <div className="dx-field-value"> <NumberBox format="#0.## kg" inputAttr={weightFormatLabel} defaultValue={3.14} /> </div> </div> </div> </div> ); } export default App;
import React from 'react'; import NumberBox from 'devextreme-react/number-box'; const integerFormatLabel = { 'aria-label': 'Integer Format' }; const currencyFormatLabel = { 'aria-label': 'Currency Format' }; const accountingFormatLabel = { 'aria-label': 'Accounting Format' }; const percentFormatLabel = { 'aria-label': 'Percent Format' }; const fixedPointFormatLabel = { 'aria-label': 'Fixed Poing Format' }; const weightFormatLabel = { 'aria-label': 'Weight Format' }; function App() { return ( <div> <div className="dx-fieldset"> <div className="dx-field"> <div className="dx-field-label">Integer format</div> <div className="dx-field-value"> <NumberBox format="#" inputAttr={integerFormatLabel} defaultValue={14500} /> </div> </div> <div className="dx-field"> <div className="dx-field-label">Currency format</div> <div className="dx-field-value"> <NumberBox format="$ #,##0.##" inputAttr={currencyFormatLabel} defaultValue={14500.55} /> </div> </div> <div className="dx-field"> <div className="dx-field-label">Accounting format</div> <div className="dx-field-value"> <NumberBox format="$ #,##0.##;($ #,##0.##)" inputAttr={accountingFormatLabel} defaultValue={-2314.12} /> </div> </div> <div className="dx-field"> <div className="dx-field-label">Percent format</div> <div className="dx-field-value"> <NumberBox format="#0%" inputAttr={percentFormatLabel} defaultValue={0.15} step={0.01} /> </div> </div> <div className="dx-field"> <div className="dx-field-label">Fixed point format</div> <div className="dx-field-value"> <NumberBox format="#,##0.00" inputAttr={fixedPointFormatLabel} defaultValue={13415.24} /> </div> </div> <div className="dx-field"> <div className="dx-field-label">Weight format</div> <div className="dx-field-value"> <NumberBox format="#0.## kg" inputAttr={weightFormatLabel} defaultValue={3.14} /> </div> </div> </div> </div> ); } export default App;
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.tsx'; ReactDOM.render(<App />, document.getElementById('app'));
import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render(<App />, document.getElementById('app'));
<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/26.1.5/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="./bundle.css" /> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> <script src="bundles/vendor/react.vendor.js"></script> <script src="./bundle.js"></script> </body> </html>
.dx-field { margin-bottom: 20px; }

The format property can accept the following value types:

  • Predefined format
    See the type property description for a list of accepted values.

  • Custom format string
    Use a LDML pattern to specify a custom format. Refer to the following article for more information: Custom Format String.

  • Function
    A function should apply a custom format to a value and return the formatted value as a string. Functions are useful for advanced formatting.

  • Object
    Full format configuration. The object structure is shown in the format API section.