Formats

You can control the format of the NumericTextBox by using the format property.

It accepts string or [NumberFormatOptions] parameters. When format is set and the input element is not focused, the value is formatted accordingly. By default, the format is set to 'n2'.

For more information on the date and number formats KendoReact supports, refer to the kendo-intl GitHub repository.

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            value: 5,
            percentage: 0.7,
            formatOptions: {
                style: 'currency',
                currency: 'EUR',
                currencyDisplay: 'name'
            }
        };
    }

    render() {
        return (
            <div>
                <h6>Decimal</h6>
                <NumericTextBox
                    format="n2"
                    defaultValue={this.state.value}
                />
                <h6>Percentage</h6>
                <NumericTextBox
                    format="p"
                    defaultValue={this.state.percentage}
                    min={0}
                    max={1}
                    step={0.1}
                />
                 <h6>Currency</h6>
                <NumericTextBox
                    defaultValue={this.state.value}
                    format="c2"
                    min={0}
                />
                <h6>Currency with format options</h6>
                <NumericTextBox
                    defaultValue={this.state.value}
                    min={0}
                    format={this.state.formatOptions}
                />
            </div>
        );
    }
}
ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);

In this article

 /