Formats in Vue Numerictextbox component

11 Jun 20246 minutes to read

You can format the value of NumericTextBox using format property. The value will be displayed in the specified format when the component is in focused out state. The format string supports both the standard numeric format and custom numeric format.

Standard formats

From the standard numeric formats, you can use the numeric related format specifiers such as n,p and c in the NumericTextBox component. By using these format specifiers, you can achieve the percentage and currency textbox behavior also.

The below example demonstrates percentage and currency formats.

Composition API (~/src/App.vue)

<template>
  <div id="app">
        <div class='wrap'>
           <ejs-numerictextbox id="percent" format='p2' placeholder="Percentage format" floatLabelType="Auto" :value="value" :step="step" :min="min" :max="max"></ejs-numerictextbox>
        </div>
        <div class='wrap'>
           <ejs-numerictextbox id="currency" placeholder="Currency format" floatLabelType="Auto" format='c2' :value="currencyvalue"></ejs-numerictextbox>
        </div>
  </div>
</template>
<script setup>

import { NumericTextBoxComponent as EjsNumerictextbox} from "@syncfusion/ej2-vue-inputs";

const value = 0.5;
const min = 0;
const max = 1;
const step = 0.01;

// sets currency with 2 numbers of decimal places format
const currencyvalue = 10;

</script>
<style>
  @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
 .wrap {
    margin: 35px auto;
    width: 240px;
}
</style>

Options API (~/src/App.vue)

<template>
  <div id="app">
    <div class='wrap'>
      <ejs-numerictextbox id="percent" format='p2' placeholder="Percentage format" floatLabelType="Auto" :value="value"
        :step="step" :min="min" :max="max"></ejs-numerictextbox>
    </div>
    <div class='wrap'>
      <ejs-numerictextbox id="currency" placeholder="Currency format" floatLabelType="Auto" format='c2'
        :value="currencyvalue"></ejs-numerictextbox>
    </div>
  </div>
</template>
<script>

import { NumericTextBoxComponent } from "@syncfusion/ej2-vue-inputs";

export default {
  name: "App",
  components: {
    "ejs-numerictextbox": NumericTextBoxComponent
  },
  data() {
    return {
      value: 0.5,
      min: 0,
      max: 1,
      step: 0.01,

      // sets currency with 2 numbers of decimal places format
      currencyvalue: 10,
    }
  }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";

.wrap {
  margin: 35px auto;
  width: 240px;
}</style>

Custom formats

From the custom numeric format, you can provide any custom format by combining one or more custom specifiers.

The below examples demonstrate format the value by using currency format string # and 0.

Composition API (~/src/App.vue)

<template>
  <div id="app">
        <div class='wrap'>
           <ejs-numerictextbox id="numeric" format='###.##' placeholder="Custom format string #" floatLabelType="Auto" :value="value"></ejs-numerictextbox>
        </div>
        <div class='wrap'>
           <ejs-numerictextbox id="numeric1" placeholder="Custom format string 0" floatLabelType="Auto" format='000.00' :value="numvalue"></ejs-numerictextbox>
        </div>
  </div>
</template>
<script setup>

import { NumericTextBoxComponent as EjsNumerictextbox } from "@syncfusion/ej2-vue-inputs";

// sets the format using custom format string `#`
const value = 10;
// sets the format using custom format string `0`
const numvalue = 10;
  
</script>
<style>
  @import "../node_modules/@syncfusion/ej2-base/styles/material.css";
  @import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";
 .wrap {
    margin: 35px auto;
    width: 240px;
}
</style>

Options API (~/src/App.vue)

<template>
  <div id="app">
    <div class='wrap'>
      <ejs-numerictextbox id="numeric" format='###.##' placeholder="Custom format string #" floatLabelType="Auto"
        :value="value"></ejs-numerictextbox>
    </div>
    <div class='wrap'>
      <ejs-numerictextbox id="numeric1" placeholder="Custom format string 0" floatLabelType="Auto" format='000.00'
        :value="numvalue"></ejs-numerictextbox>
    </div>
  </div>
</template>
<script>

import { NumericTextBoxComponent } from "@syncfusion/ej2-vue-inputs";

export default {
  name: "App",
  components: {
    "ejs-numerictextbox": NumericTextBoxComponent
  },
  data() {
    return {
      // sets the format using custom format string `#`
      value: 10,
      // sets the format using custom format string `0`
      numvalue: 10,
    }
  }
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-inputs/styles/material.css";

.wrap {
  margin: 35px auto;
  width: 240px;
}</style>