Input

A basic widget for getting the user input is a text field. Keyboard and mouse can be used for providing or changing data.

When To Use

A user input in a form field is needed.
A search input is required.

Examples

Basic usage

vue

<template>
  <a-input v-model:value="value" placeholder="Basic usage" />
</template>

<script setup>
import { ref } from 'vue'

const value = ref('')
</script>

Three sizes of Input

vue

<template>
  <div class="components-input-demo-size">
    <a-input v-model:value="value" size="large" placeholder="large size" />
    <a-input v-model:value="value" placeholder="default size" />
    <a-input v-model:value="value" size="small" placeholder="small size" />
  </div>
</template>

<script setup>
import { ref } from 'vue'

const value = ref('')
</script>

<style>
.components-input-demo-size .ant-input {
  width: 200px;
  margin: 0 8px 8px 0;
}
</style>

Pre / Post tab

vue

<template>
  <div>
    <a-input addon-before="Http://" addon-after=".com" default-value="mysite" />
    <br />
    <br />
    <a-input default-value="mysite">
      <template #addonBefore>
        <a-select v-model:value="selectBefore" style="width: 90px">
          <a-select-option value="Http://">Http://</a-select-option>
          <a-select-option value="Https://">Https://</a-select-option>
        </a-select>
      </template>
      <template #addonAfter>
        <a-select v-model:value="selectAfter" style="width: 80px">
          <a-select-option value=".com">.com</a-select-option>
          <a-select-option value=".jp">.jp</a-select-option>
          <a-select-option value=".cn">.cn</a-select-option>
          <a-select-option value=".org">.org</a-select-option>
        </a-select>
      </template>
    </a-input>
    <br />
    <br />
    <a-input default-value="mysite">
      <template #addonAfter>
        <SettingOutlined />
      </template>
    </a-input>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { SettingOutlined } from '@ant-design/icons-vue'

const selectBefore = ref('Http://')
const selectAfter = ref('.com')
</script>

vue

<template>
  <div>
    <a-input-search
      v-model:value="value"
      placeholder="input search text"
      enter-button="Search"
      size="large"
      @search="onSearch"
    />
    <br />
    <br />
    <a-input-search
      v-model:value="value"
      placeholder="input search text"
      @search="onSearch"
    />
    <br />
    <br />
    <a-input-search
      v-model:value="value"
      placeholder="input search text"
      enter-button
      @search="onSearch"
    />
    <br />
    <br />
    <a-input-search
      v-model:value="value"
      placeholder="input search text"
      size="large"
    >
      <template #enterButton>
        <a-button>
          <template #icon><SearchOutlined /></template>
          Custom
        </a-button>
      </template>
    </a-input-search>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { SearchOutlined } from '@ant-design/icons-vue'

const value = ref('')

const onSearch = (searchValue) => {
  console.log('use value', searchValue)
  console.log('or use this.value', value.value)
}
</script>

TextArea

vue

<template>
  <div>
    <a-textarea
      v-model:value="value"
      placeholder="Basic usage"
      :rows="4"
    />
    <br />
    <br />
    <a-textarea
      v-model:value="value"
      placeholder="Autosize height based on content lines"
      auto-size
    />
    <br />
    <br />
    <a-textarea
      v-model:value="value"
      placeholder="Autosize height with minimum and maximum number of lines"
      :auto-size="{ minRows: 2, maxRows: 6 }"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'

const value = ref('')
</script>

Password box

vue

<template>
  <div>
    <a-input-password
      v-model:value="password"
      placeholder="input password"
    />
    <br />
    <br />
    <a-input-password
      v-model:value="password"
      placeholder="input password"
      :icon-render="visible => (visible ? EyeTwoTone : EyeInvisibleOutlined)"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { EyeInvisibleOutlined, EyeTwoTone } from '@ant-design/icons-vue'

const password = ref('')
</script>

API

Input

Property	Description	Type	Default
addonAfter	The label text displayed after (on the right side of) the input field	string \| slot	-
addonBefore	The label text displayed before (on the left side of) the input field	string \| slot	-
allowClear	If allow to remove input content with clear icon	boolean	false
bordered	Whether has border style	boolean	true
defaultValue	The initial input content	string	-
disabled	Whether the input is disabled	boolean	false
id	The ID for input	string	-
maxlength	The max length	number	-
prefix	The prefix icon for the Input	string \| slot	-
showCount	Whether show text count	boolean \| object	false
size	The size of the input box. Note: in the context of a form, the `middle` size is used	`large` \| `middle` \| `small`	-
suffix	The suffix icon for the Input	string \| slot	-
type	The type of input, see: MDN(use `Input.TextArea` instead of `type="textarea"`)	string	`text`
value(v-model)	The input content value	string	-

Input Events

Events Name	Description	Arguments
blur	The callback function that is triggered when Input loses focus	function(e)
change	Callback when user input	function(e)
focus	The callback function that is triggered when Input gets focus	function(e)
pressEnter	The callback function that is triggered when Enter key is pressed	function(e)

Input.TextArea

Property	Description	Type	Default
allowClear	If allow to remove input content with clear icon	boolean	false
autoSize	Height autosize feature, can be set to true \| false or an object	boolean \| object	false
bordered	Whether has border style	boolean	true
defaultValue	The initial input content	string	-
maxlength	The max length	number	-
showCount	Whether show text count	boolean \| object	false
value(v-model)	The input content value	string	-

Input.Search

Property	Description	Type	Default	Version
enterButton	Whether to show an enter button after input. This property conflicts with the `addonAfter` property	boolean \| slot	false
loading	Search box with loading	boolean	false

Input.Search Events

Events Name	Description	Arguments	Version
search	The callback function triggered when you click on the search-icon, the clear-icon or press the Enter key	function(value, event)

Input.Password

Property	Description	Type	Default	Version
iconRender	Custom toggle button	(visible) => VNode	(visible) => (visible ? <EyeOutlined /> : <EyeInvisibleOutlined />)
visibilityToggle	Whether show toggle button or control password visible	boolean \| VisibilityToggle	true

VisibilityToggle

Property	Description	Type	Default	Version
visible	Whether the password is show or hide	boolean	false
onVisibleChange	Callback executed when visibility of the password is changed	boolean => void	-

Input ​

When To Use ​

Examples ​

Basic usage ​

Three sizes of Input ​

Pre / Post tab ​

Search box ​

TextArea ​

Password box ​

API ​

Input ​

Input Events ​

Input.TextArea ​

Input.Search ​

Input.Search Events ​

Input.Password ​

VisibilityToggle ​

Input

When To Use

Examples

Basic usage

Three sizes of Input

Pre / Post tab

Search box

TextArea

Password box

API

Input

Input Events

Input.TextArea

Input.Search

Input.Search Events

Input.Password

VisibilityToggle