Kendo UI for Vue

Vue MaskedTextBox

  • Uses a mask to control the input of the user in terms of data type, data format, or text length.
  • Part of Kendo UI for Vue library together with other best-in-class native components for building fast and beautiful apps.
  • Comes with outstanding technical support, detailed documentation and demos.
Nasa, Visa, Microsoft Fox, Samsung, IBM World Bank Group, Volvo
  • Overview

    The MaskedTextBox is a variation of the input element that controls the data entered by the user in terms of data type, data format, or text length. It is often used in scenarios where the user should enter data like zip codes, phone numbers, credit card numbers, etc. The Kendo UI for Vue MaskedTextBox provides both built-in masks and mask customization. Setting a mask for the component, it not only will indicate the user what kind of format is expected to enter but will also enforce this mask as the data is inserted in the input.
    MaskedTextBox - Overview
  • Masks

    The Kendo UI for Vue MaskedTextBox supports a set of pre-defined masks like requiring digits, letters, or special characters. All built-in masks can be combined to create a custom mask that meets any data format requirement.

    Kendo UI for Vue MaskedTextBox – Masks usage example

    MaskedTextBox - Masks
  • Disabled MaskedTextBox

    While the MaskedTextBox is enabled by default, there could be scenarios in which it should be disabled. For these cases, with a simple configuration of the disabled property, you can disable the user interaction with the component and visually indicate that the component is in a disabled state.

    Kendo UI for Vue MaskedTextBox – Disabled mode example
    MaskedTextBox - Disabled
  • Read Only MaskedTextBox

    The Kendo UI for Vue MaskedTextBox can be used in read-only mode, preventing the user from entering data in the input. In this mode, the component will display a pre-defined value and will only allow the selection of the available text.

    Kendo UI for Vue MaskedTextBox – Read-only mode example
    MaskedTextBox - Read Only MaskedTextBox
  • Form Integration and Validation

    The Kendo UI for Vue MaskedTextBox supports a native Kendo UI for Vue implementation of HTML5 form validation making it easy to be used inside a form. With its built-in features, you can configure basic or complex validation scenarios with a minimum effort. 

    Kendo UI for Vue MaskedTextBox - Form integration demo
    MaskedTextBox – Forms Support
  • Accessibility

    The MaskedTextBox is designed to be accessible by on-screen readers. It provides full WAI-ARIA accessibility support and meets the Section 508 requirements.


Get Started with Kendo UI for Vue

Kendo UI