Skip to content

Input

Basic form input component that supports prefix, suffix icons, and other features.

Basic Usage

Icon

Set the prefix and suffix icons of the input box through the prefix and suffix properties.

Password

Create a password input box by setting type="password".

Disabled State

Set the input box to a disabled state by setting the disabled property.

Formatted Input

Format the input content by setting the mask property. For example, it can be used to format phone numbers, dates, etc. (Setting the mask property requires setting type='text').

Regular Expressions

You can limit the format of the input content using regular expressions. For example, the following example limits the input to only numbers starting with 1-6 and up to 6 digits.

Properties

Property NameDescriptionTypeDefault Value
typeInput box type'text' | 'password''text'
placeholderInput box placeholder textstring-
disabledWhether to disablebooleanfalse
prefixPrefix iconstring-
suffixSuffix iconstring-
maskInput formatting rulestring-
modelValueBound valuestring | number-