Input Component

Input is a basic form control for users to enter data, supporting various types of input.

Basic Usage

Basic input for entering single-line text.

Current value:

Show Code

Disabled State

Set the disabled attribute to disable the input.

Show Code

Password Input

Set the password attribute to create a password input with show/hide password toggle.

Show Code

Clearable Input

By default, inputs with v-model will show a clear icon after entering content, which can be clicked to clear the content.

Default with clear button:

Disable clear button:

Show Code

Different Sizes

Input supports three sizes: small, default, and large.

Small input:

Default input:

Large input:

Show Code

Maximum Input Length

Set the maxLength attribute to limit the maximum input length.

Current length: 0/10

Show Code

Event Handling

Input provides multiple events: focus, blur, enter, input, clear.

Event Log:

Show Code

Input API

Attributes

Attribute	Description	Type	Accepted Values	Default
v-model	Binding value	string	—	—
size	Size	string	small / default / large	default
placeholder	Placeholder text	string	—	—
disabled	Whether disabled	boolean	—	false
clearable	Whether clearable	boolean	—	true
password	Whether password input	boolean	—	false
maxLength	Maximum input length	number	—	—
debounce	Debounce callback	(value: string) => void	—	—
debounceDelay	Debounce delay (ms)	number	—	1000
autocomplete	Autocomplete	string	on / off	off
isTip	Whether show tip	boolean	—	true

Events

Event Name	Description	Parameters
focus	Triggered when input is focused	(value: string)
blur	Triggered when input loses focus	(value: string)
enter	Triggered when Enter key is pressed	(value: string)
input	Triggered when input value changes	(value: string)
clear	Triggered when clear button is clicked	—

Slots

Slot Name	Description
prefix	Input prefix content
default	Input default content

Style Variables

The input component uses the following style variables, which can be customized through SCSS variables:

Variable Name	Description
$theme-color-primary	Theme color - Primary
$text-color-default	Default text color
$border-color-default	Default border color
$bg-color-default	Default background color
$opacity-disabled	Disabled state opacity
$font-size-small	Small font size
$font-size-default	Default font size
$font-size-large	Large font size