UI Development with Chakra UI Vue — Number Input

Chakra UI Vue is a UI framework made for Vue.js that lets us add good-looking UI components into our Vue app.

This article will look at how to get started with UI development with Chakra UI Vue.

Number Input

We can add a numeric input with Chakra UI Vue.

To do this, we write:

<template>
  <c-box>
    <c-number-input>
      <c-number-input-field />
      <c-number-input-stepper>
        <c-number-increment-stepper />
        <c-number-decrement-stepper />
      </c-number-input-stepper>
    </c-number-input>
  </c-box>
</template>

<script>
import {
  CBox,
  CNumberInput,
  CNumberInputField,
  CNumberInputStepper,
  CNumberIncrementStepper,
  CNumberDecrementStepper,
} from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CNumberInput,
    CNumberInputField,
    CNumberInputStepper,
    CNumberIncrementStepper,
    CNumberDecrementStepper,
  },
};
</script>

c-number-input is the container for the input.

c-number-input-field is the numeric input itself.

c-number-input-stepper is the container for the increment and decrement buttons.

c-number-increment-stepper is the increment button.

c-number-decrement-stepper is the decrement button.

We can bind the entered value to a reactive property with v-model :

<template>
  <c-box>
    <c-number-input v-model="value">
      <c-number-input-field />
      <c-number-input-stepper>
        <c-number-increment-stepper />
        <c-number-decrement-stepper />
      </c-number-input-stepper>
    </c-number-input>
  </c-box>
</template>

<script>
import {
  CBox,
  CNumberInput,
  CNumberInputField,
  CNumberInputStepper,
  CNumberIncrementStepper,
  CNumberDecrementStepper,
} from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CNumberInput,
    CNumberInputField,
    CNumberInputStepper,
    CNumberIncrementStepper,
    CNumberDecrementStepper,
  },
  data() {
    return {
      value: 15,
    };
  },
};
</script>

And we can set the max and min values allowed with the max and min props respectively:

<template>
  <c-box>
    <c-number-input v-model="value" :max="20" :min="10">
      <c-number-input-field />
      <c-number-input-stepper>
        <c-number-increment-stepper />
        <c-number-decrement-stepper />
      </c-number-input-stepper>
    </c-number-input>
  </c-box>
</template>

<script>
import {
  CBox,
  CNumberInput,
  CNumberInputField,
  CNumberInputStepper,
  CNumberIncrementStepper,
  CNumberDecrementStepper,
} from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CNumberInput,
    CNumberInputField,
    CNumberInputStepper,
    CNumberIncrementStepper,
    CNumberDecrementStepper,
  },
  data() {
    return {
      value: 15,
    };
  },
};
</script>

The number of decimal place of the number can be set with the precision prop:

<template>
  <c-box>
    <c-number-input :precision="2" v-model="value" :max="20" :min="10">
      <c-number-input-field type="number" />
      <c-number-input-stepper>
        <c-number-increment-stepper />
        <c-number-decrement-stepper />
      </c-number-input-stepper>
    </c-number-input>
  </c-box>
</template>

<script>
import {
  CBox,
  CNumberInput,
  CNumberInputField,
  CNumberInputStepper,
  CNumberIncrementStepper,
  CNumberDecrementStepper,
} from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CNumberInput,
    CNumberInputField,
    CNumberInputStepper,
    CNumberIncrementStepper,
    CNumberDecrementStepper,
  },
  data() {
    return {
      value: 15,
    };
  },
};
</script>

The clamp-value-on-blur prop resets the value to the nearest min or max when we remove focus from the input:

<template>
  <c-box>
    <c-number-input clamp-value-on-blur v-model="value" :max="20" :min="10">
      <c-number-input-field type="number" />
      <c-number-input-stepper>
        <c-number-increment-stepper />
        <c-number-decrement-stepper />
      </c-number-input-stepper>
    </c-number-input>
  </c-box>
</template>

<script>
import {
  CBox,
  CNumberInput,
  CNumberInputField,
  CNumberInputStepper,
  CNumberIncrementStepper,
  CNumberDecrementStepper,
} from "@chakra-ui/vue";

export default {
  components: {
    CBox,
    CNumberInput,
    CNumberInputField,
    CNumberInputStepper,
    CNumberIncrementStepper,
    CNumberDecrementStepper,
  },
  data() {
    return {
      value: 15,
    };
  },
};
</script>

Conclusion

We can add a number input with Chakra UI Vue.