MaskedTextBoxProps
Represents the props of the Kendo UI for Vue MaskedTextBox component.
Definition
Package:@progress/kendo-vue-inputs
Properties
accessKey?
string
Sets the accessKey attribute of the MaskedTextBox.
ariaDescribedBy?
string
Sets the id values of the elements that describe the MaskedTextBox, like the HTML aria-describedby attribute.
For example, these elements can contain an error or a hint message.
ariaLabelledBy?
string
Sets the id values of the elements that label the MaskedTextBox.
defaultValue?
string
Sets the initial value of the MaskedTextBox. The MaskedTextBox then handles the next updates on its own.
dir?
string
Sets the dir HTML attribute of the MaskedTextBox.
disabled?
boolean
Sets whether the MaskedTextBox is disabled.
fillMode?
"flat" | "solid" | "outline"
Sets the fill mode of the MaskedTextBox. The fill mode controls the background and the border.
The available options are:
- solid
- outline
- flat
undefined
iconName?
String
Sets the name of the input icon. This property works only with the Kendo UI for Vue FontIcons. To learn how to load the Font Icons in your project, see the Icons article.
id?
string
Sets the id of the input DOM element. The label uses it as its target.
includeLiterals?
boolean
Sets whether the raw value includes the mask literals. Defaults to false.
false
inputAttributes?
Object
Sets the native HTML attributes of the inner focusable input element.
You cannot change the attributes that the MaskedTextBox needs to work.
inputClass?
String
Sets additional CSS classes to the inner input element.
inputPrefix?
Object | Function | String | Boolean
Sets the content of the MaskedTextBox prefix. Accepts a slot name, a render function, or a Vue component.
inputSuffix?
Object | Function | String | Boolean
Sets the content of the MaskedTextBox suffix. Accepts a slot name, a render function, or a Vue component.
label?
string
Renders a floating label for the MaskedTextBox.
mask?
string
Sets the mask. If you do not set a mask, the MaskedTextBox works like a standard type="text" input.
maskValidation?
boolean
Sets whether the form validation uses the built-in mask validator. Defaults to true.
true
modelRawValue?
string
Sets the raw value of the MaskedTextBox when you use v-model:modelRawValue.
modelValue?
string
Sets the value of the MaskedTextBox when you use v-model.
name?
string
Sets the name property of the input DOM element.
onBlur?
(event: MaskedTextBoxEvent) => void
Fires each time the MaskedTextBox loses the focus. The event name is blur.
onChange?
(event: MaskedTextBoxChangeEvent) => void
Fires each time the user edits the value. The event name is change.
onFocus?
(event: MaskedTextBoxEvent) => void
Fires each time the MaskedTextBox gets the focus. The event name is focus.
placeholder?
string
Sets the placeholder text of the input element.
prompt?
string
Sets the prompt character for the masked value. Defaults to _.
'_'
promptPlaceholder?
string
Sets the character that marks an empty position in the raw value. Defaults to .
' '
readonly?
boolean
Sets whether the MaskedTextBox is read-only.
required?
boolean
Sets whether null is a valid value for the component.
rounded?
"small" | "medium" | "large" | "none" | "full"
Sets the border radius of the MaskedTextBox.
The available options are:
- none
- small
- medium
- large
- full
undefined
rules?
{ [key: string]: RegExp }
Sets the mask rules. Each rule maps a mask character to a RegExp.
selection?
{ start: number; end: number }
Sets the start and the end of the selected input text. The MaskedTextBox applies the selection the next time it renders.
showClearButton?
Boolean
Sets whether the MaskedTextBox shows the clear button. Defaults to false.
showLoadingIcon?
Boolean
Sets whether the MaskedTextBox shows the loading icon. Defaults to false.
showValidationIcon?
Boolean
Sets whether the MaskedTextBox shows the validation icon. Defaults to false.
size?
"small" | "medium" | "large"
Sets the size of the MaskedTextBox.
The available options are:
- small
- medium
- large
undefined
tabIndex?
number
Sets the tabIndex attribute of the MaskedTextBox.
title?
string
Sets the title of the input element of the MaskedTextBox.
type?
string
Sets the type attribute of the input element.
'text'
valid?
boolean
Overrides the validity state of the component.
When you set valid, the component ignores the required property.
validationMessage?
string
Sets the form error message of the component. If you set it to an empty string, the component shows no error.
validityStyles?
boolean
Shows or hides the invalid state styles of the component. When you set it to false, the component shows no invalid state styles.
value?
string
Sets the value of the MaskedTextBox.
width?
string | number
Sets the width of the MaskedTextBox.
wrapperClass?
String
Sets additional CSS classes to the wrapper element.