Input

TuiInput is the fundamental form input component. It supports various modes such as single-line text, multi-line text, password hiding, and numerical input, while providing extensive prefix and suffix decoration capabilities.

Basic Usage

Text Input

The most basic usage involves using v-model to bind data.

• Clearable: Set the clearable property to display a one-click clear button.
• MaxLength: Set maxLength to limit input length and display a character count on the right.

<template>
  <div class="demo-gap">
    <TuiInput v-model="val1" placeholder="Please input..." />
    
    <TuiInput v-model="val2" clearable placeholder="Clearable" />
    
    <TuiInput v-model="val3" :maxLength="30" clearable placeholder="30-character limit" />
  </div>
</template>

Password Input

Set the type to 'password'. The component features a built-in password visibility toggle (eye icon).

<TuiInput type="password" v-model="password" placeholder="Please enter password" />

Numerical Input (Number)

Set the type to 'number'. This mode supports maximum/minimum limits, step values, and precision control.

• min/max: Limits the numerical range.
• step: The step size (the value incremented or decremented when clicking the buttons).
• precision: Numerical precision (number of decimal places to keep).

<template>
  <TuiInput type="number" v-model="num1" />
  
  <TuiInput type="number" :min="0" :max="10" v-model="num2" />
  
  <TuiInput type="number" :step="0.05" :precision="2" v-model="num3" />
</template>

Multi-line Text (Textarea)

Set the type to 'textarea'.

• rows: Sets the default number of rows.
• autosize: Whether to automatically adjust the height based on content (adaptive).

<TuiInput 
  type="textarea" 
  :rows="3" 
  :maxLength="200" 
  v-model="desc" 
  placeholder="Please enter description..." 
/>

Decoration and Combination

Icons

Three icon position properties are provided:

• icon: Default suffix icon (commonly used for search).
• prefixIcon: Header icon.
• suffixIcon: Suffix icon (similar position to icon, but with clearer semantics).

<template>
  <TuiInput icon="tui-icon ti-search" v-model="search" />
  
  <TuiInput 
    prefixIcon="tui-icon ti-user" 
    suffixIcon="tui-icon ti-info-circle" 
    v-model="user" 
  />
</template>

Composite Slots (Slots)

Through the prefix and suffix slots, more complex elements such as labels, buttons, or dropdown menus can be embedded before or after the input box.

<template>
  <TuiInput v-model="url">
    <template #prefix>Http://</template>
    <template #suffix>.com</template>
  </TuiInput>

  <TuiInput v-model="keyword" placeholder="Search...">
    <template #suffix>
      <TuiButton type="primary" size="small">Search</TuiButton>
    </template>
  </TuiInput>
</template>

Status and Size

• Disabled: Disabled state; not editable and styled in gray.
• Readonly: Read-only state; not editable but maintains original styling (no border or light background).
• Size: Supports large, default, and small.

<template>
  <TuiInput disabled value="Disabled State" />
  <TuiInput readonly value="Read-only State" />
  
  <div class="demo-gap">
    <TuiInput size="large" placeholder="Large" />
    <TuiInput size="default" placeholder="Default" />
    <TuiInput size="small" placeholder="Small" />
  </div>
</template>

API Reference

Props

Property	Type	Default	Description
modelValue	String/Number	-	Bound value.
type	String	'text'	Type. Options: text, textarea, password, number.
size	String	'default'	Size. Options: large, default, small.
placeholder	String	-	Input placeholder text.
clearable	Boolean	false	Whether it is clearable.
disabled	Boolean	false	Whether it is disabled.
readonly	Boolean	false	Whether it is read-only.
maxLength	Number/String	-	Maximum input length.
icon	String	-	Suffix icon class name.
prefixIcon	String	-	Header icon class name.
suffixIcon	String	-	Suffix icon class name.
rows	Number	3	(Textarea) Number of rows.
autosize	Boolean	false	(Textarea) Whether to adapt height automatically.
min	Number	-100	(Number) Minimum value.
max	Number	MAX_SAFE	(Number) Maximum value.
step	Number	1	(Number) Step size.
precision	Number	0	(Number) Numerical precision.
formatter	Function	-	Content formatting function.
autocomplete	String	'off'	Native autocomplete attribute.

Events

Event Name	Description	Callback Parameters
update:modelValue	Triggered when the bound value changes.	(value)
input	Triggered during input.	(value)
change	Triggered on blur or Enter (only if the value changed).	(value)
focus	Triggered when gaining focus.	(event)
blur	Triggered when losing focus.	(event)
clear	Triggered when the clear button is clicked.	-

Slots

Slot Name	Description
prefix	Header content of the input box (text or component).
suffix	Suffix content of the input box (text or component).