🌏 Translated with the assistance of DeepSeek and ChatGPT

Input

Enter text.

Basic Usage

You can enter text here. Pass in modelValue to enable controlled mode. If not passed or set to undefined, it will be uncontrolled mode, in which case you can use the defaultValue property as the default value.

Hide source code

Password Input

This component can also be a password input box, just set the password property to true.

Hide source code

Readonly & Disabled

Set readonly for read-only, and disabled for disabled. In both cases, the internal <input> will be set to disabled. The difference is mostly in the styles.

Hide source code

Clear Text

When clearable is true, a clear button will be shown when focused.

Hide source code

Loading State

Set loading for loading state. It works the same as usual, just with an extra loading icon.

Hide source code

Input Size

The input box can have different sizes.

Hide source code

Rounded Borders

The input box can also have rounded borders.

Due to limited time and technical resources, custom border-radius still needs optimization, but it does not affect overall usability.

Hide source code

Prefix & Suffix

Add extra content to the prefix or suffix.

$

km

Hide source code

Composite Input

With the InputGroup component, you can combine various input controls and buttons together.

.ini

Hide source code

Character Count & Length Limit

The showCount property enables character count display, and maxLength sets the maximum length.

By default, the Input component uses str.length to calculate length, which may be inaccurate for compound characters. We recommend using grapheme-splitter to solve this issue. The countGraphemes property sets the function for counting characters, and sliceGraphemes is used to slice the string within the length limit. If only countGraphemes is provided without sliceGraphemes, the maxLength limit will not take effect.

8

8 / 20

4 / 20

Hide source code

Manual Operations

The Input component exports some functions to operate on itself.

Hide source code

Form Validation Status

The input box supports four form validation statuses: 'normal' (default), 'success', 'warning', and 'error'.

Hide source code

API

InputProps

Attribute	Type	Optional	Default	Description	Version
modelValue	string | null	True		Value of the input box (controlled mode), supports v-model.	0.0.2
defaultValue	string | null	True		Default value of the input box (uncontrolled mode).	0.0.2
placeholder	string	True		Placeholder text.	0.0.2
password	boolean	True	false	Whether it is a password input box.	0.0.2
disabled	boolean	True	false	Whether it is disabled.	0.0.2
readonly	boolean	True	false	Whether it is read-only.	0.0.2
clearable	boolean	True	false	Whether to show the clear button.	0.0.2
loading	boolean	True	false	Whether to show the loading state.	0.0.2
size	'medium' | 'large' | 'small'	True	'medium'	Input box size.	0.0.2
shape	'rect' | 'round'	True	'rect'	Input box shape.	0.0.3
borderRadius	NumberOrPercentage | NumberOrPercentage[]	True		Border radius, takes precedence over shape, behaves like CSS border-radius; a single value or array of length 1 → all corners; length 2 → [top left & bottom right, top right & bottom left]; length 3 → [top left, top right & bottom left, bottom right]; length 4 → applies to each corner in clockwise order.	0.0.2
maxLength	number	True		Maximum input length.	0.0.2
showCount	boolean	True	false	Whether to show character count.	0.0.2
countGraphemes	(value: string) => number	True		Custom character count function. If only countGraphemes is provided without sliceGraphemes, the maxLength limit will not take effect.	0.0.2
sliceGraphemes	(value: string, limit: number) => string	True		Custom function to slice the string to the specified length.	0.0.2
status	'success' | 'warning' | 'error' | 'normal'	True	'normal'	Form validation status.	0.0.2
autofocus	boolean	True	false	Native <input> autofocus attribute.	0.0.2
nativeType	'text' | 'password' | 'email' | 'tel' | 'url' | 'search'	True	'text'	Native <input> type attribute.	0.0.2
pollSizeChange	boolean	True	false	Enables polling for component size changes. This also affects the property of the same name in data input components that are child components.	0.1.0

InputEvents

Event	Parameter	Description	Version
input	value: string, e: Event	Callback when input is entered.	0.0.2
update:modelValue	value: string	Callback to update modelValue.	0.0.2
change	value: string, e: Event | undefined	Callback when input content changes.	0.0.2
clear	value: string	Callback when the clear button is clicked and content is cleared.	0.0.2
blur	e: FocusEvent	Callback when the input box loses focus.	0.0.2
focus	e: FocusEvent	Callback when the input box is focused.	0.0.2

InputSlots

Slot	Parameter	Description	Version
prefix		Prefix content.	0.0.2
suffix		Suffix content.	0.0.2
count	inputValue: number, currentLength: number, maxLength: number	Slot for displaying character count.	0.0.2

InputExpose

Attribute	Type	Optional	Default	Description	Version
focus	() => void	False		Focus the current input box.	0.0.2
blur	() => void	False		Remove focus from the current input box.	0.0.2
clear	() => void	False		Clear the current input box.	0.0.2
select	() => void	False		Select the content of the current input box.	0.0.2

NumberOrPercentage

export type NumberOrPercentage = number | `${number}%`