Input

The basic form components have been expanded on the basis of native controls and can be used in combination.

Basic usage

Input data using mouse or keyboard.

Disabled

Disable the Input with the disabled attribute.

Allow clear

Make the Input allow clear with the allowClear attribute.

Formatter

Display value within its situation with formatter, and we usually use parser at the same time.

Password box

Make a toggle-able password Input with the show-password attribute.

Input with icon

Add an icon to indicate input type.

Attribute

Slot

<template>
  <p>Attribute</p>
  <tu-row :gutter="20" class="mb-2">
    <tu-col :span="12">
      <tu-input
        v-model="inputValue1"
        placeholder="Please input"
        :suffix-icon="Search"
      ></tu-input>
    </tu-col>
    <tu-col :span="12">
      <tu-input
        v-model="inputValue2"
        placeholder="Please input"
        :prefix-icon="Search"
      ></tu-input>
    </tu-col>
  </tu-row>
  <p>Slot</p>
  <tu-row :gutter="20">
    <tu-col :span="12">
      <tu-input v-model="inputValue3" placeholder="Please input">
        <template #suffix>
          <tu-icon><Search /></tu-icon>
        </template>
      </tu-input>
    </tu-col>
    <tu-col :span="12">
      <tu-input v-model="inputValue4" placeholder="Please input">
        <template #prefix>
          <tu-icon><Search /></tu-icon>
        </template>
      </tu-input>
    </tu-col>
  </tu-row>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { Search } from '@tu-view-plus/icons-vue';
const inputValue1 = ref('');
const inputValue2 = ref('');
const inputValue3 = ref('');
const inputValue4 = ref('');
</script>

<template>
  <p>Attribute</p>
  <tu-row :gutter="20" class="mb-2">
    <tu-col :span="12">
      <tu-input
        v-model="inputValue1"
        placeholder="Please input"
        :suffix-icon="Search"
      ></tu-input>
    </tu-col>
    <tu-col :span="12">
      <tu-input
        v-model="inputValue2"
        placeholder="Please input"
        :prefix-icon="Search"
      ></tu-input>
    </tu-col>
  </tu-row>
  <p>Slot</p>
  <tu-row :gutter="20">
    <tu-col :span="12">
      <tu-input v-model="inputValue3" placeholder="Please input">
        <template #suffix>
          <tu-icon><Search /></tu-icon>
        </template>
      </tu-input>
    </tu-col>
    <tu-col :span="12">
      <tu-input v-model="inputValue4" placeholder="Please input">
        <template #prefix>
          <tu-icon><Search /></tu-icon>
        </template>
      </tu-input>
    </tu-col>
  </tu-row>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { Search } from '@tu-view-plus/icons-vue';
const inputValue1 = ref('');
const inputValue2 = ref('');
const inputValue3 = ref('');
const inputValue4 = ref('');
</script>

Mixed input

Prepend or append an element, generally a label or a button.

Http://

Com

Limit length

maxlength and minlength attributes of input, they declare a limit on the number of characters a user can input.

0 / 10

Sizes

Besides default size, tu-input component provides three additional sizes for you to choose among different scenarios. Use attribute size to set additional sizes with mini, small, large.

Input API

Input Attributes

Name	Description	Type	Default
v-model	Binding value	`String` `Number`	-
type	Type of input	`String`	text
size	Size of Input	`String`	medium
disabled	Whether Input is disabled	`Boolean`	-
maxlength	The max length	`String` `Number`	-
minlength	The min length	`Number`	-
show-word-limit	Whether show word count, only works when type is 'text'	`Boolean`	false
placeholder	Placeholder of Input	`String`	-
allow-clear	Whether to show clear button	`Boolean`	-
formatter	Specifies the format of the value presented input.(only works when type is 'text')	`Function`	-
parser	Specifies the value extracted from formatter input.(only works when type is 'text')	`Function`	-
show-password	Whether to show toggleable password input	`Boolean`	-
prefix-icon	Prefix icon component	`String` `Component`	-
suffix-icon	Suffix icon component	`String` `Component`	-
name	Same as name in native input	`String`	-
readonly	Same as readonly in native input	`Boolean`	false
max	Same as max in native input	-	-
min	Same as min in native input	-	-
step	Same as step in native input	-	-
autofocus	Same as autofocus in native input	`Boolean`	false
form	Same as form in native input	`String`	-
tabindex	Input tabindex	`String` `Number`	-
validate-event	Whether to trigger form validation	`Boolean`	true
input-style	The style of the input element	`String` `Object`	{}

Input Events

Name	Description	Type
blur	Triggers when Input blurs	`Function`
focus	Triggers when Input focuses	`Function`
change	Triggers when the input box loses focus or the user presses Enter, only if the modelValue has changed	`Function`
input	Triggers when the Input value change	`Function`
clear	Triggers when the Input is cleared by clicking the clear button	`Function`

Input Slots

Name	Description
prefix	Content as Input prefix
suffix	Content as Input suffix
prepend	Content to prepend before Input
append	Content to append after Input

Input Exposes

Name	Description	Type
focus	Focus the Input element	`Function`
blur	Blur the Input element	`Function`
clear	Clear Input value	`Function`
input	HTML Input element	`object`
ref	HTML element	`object`
select	Select the text in input element	`Function`

Input ​

Basic usage ​

Disabled ​

Allow clear ​

Formatter ​

Password box ​

Input with icon ​

Mixed input ​

Limit length ​

Sizes ​

Input API ​

Input Attributes ​

Input Events ​

Input Slots ​

Input Exposes ​