Input

Matches Arco Input with a gray fill and a primary border on focus. See the Element Plus docs for props.

Basics & Sizes

The size prop maps to Arco's three sizes; disabled keeps the disabled state.

<script setup lang="ts">
import { ref } from 'vue'
const value = ref('')
</script>

<template>
  <el-input v-model="value" placeholder="Enter text" style="width: 240px" />
  <el-input size="small" placeholder="Small" style="width: 240px" />
  <el-input size="large" placeholder="Large" style="width: 240px" />
  <el-input disabled placeholder="Disabled" style="width: 240px" />
</template>

Validation Error

An error on el-form-item displays the Arco-style red validation state.

Email

<script setup lang="ts">
import { ref } from 'vue'
const email = ref('invalid-email')
</script>

<template>
  <el-form style="width: 100%">
    <el-form-item label="Email" error="Please enter a valid email address">
      <el-input v-model="email" placeholder="Email" style="width: 240px" />
    </el-form-item>
  </el-form>
</template>

Icons & Addons

Prefixes, suffixes, clear controls, password fields and addons share the filled input style.

https://

.com

<script setup lang="ts">
import { ref } from 'vue'
import { User, Search } from '@element-plus/icons-vue'
const name = ref('Alex')
const password = ref('secret')
</script>

<template>
  <el-input v-model="name" :prefix-icon="User" clearable placeholder="Username" style="width: 240px" />
  <el-input :suffix-icon="Search" placeholder="Search" style="width: 240px" />
  <el-input v-model="password" type="password" show-password style="width: 240px" />
  <el-input placeholder="Domain" style="width: 320px">
    <template #prepend>https://</template>
    <template #append>.com</template>
  </el-input>
</template>

Textarea & Limits

Use textarea for multiline input and show-word-limit for a character count.

5 / 20

<script setup lang="ts">
import { ref } from 'vue'
const text = ref('')
const title = ref('Hello')
</script>

<template>
  <el-input v-model="text" type="textarea" :rows="3" placeholder="Write a note" style="width: 320px" />
  <el-input v-model="title" maxlength="20" show-word-limit placeholder="Title" style="width: 240px" />
</template>

Differences from Arco

• Password visibility uses Element Plus icons.
• Character-count spacing and textarea resize handles follow Element Plus.