El Input

Element Plus Input Component

Input component for entering text data with mouse or keyboard.

When to Invoke

Invoke this skill when:

• User needs to implement text input fields
• User wants to create textarea with auto-resize
• User needs password input with toggle visibility
• User wants to add prefix/suffix icons or content
• User needs input validation or formatting
• User asks about input length limits

Features

• Multiple Types: text, textarea, password, number, email, search, tel, url
• Size Variants: large, default, small
• Clearable: one-click clear functionality
• Password Toggle: show/hide password
• Word Limit: character count display
• Auto-resize Textarea: adaptive height
• Formatter: value formatting and parsing
• Prefix/Suffix: icons or custom content
• Prepend/Append: compound input fields

API Reference

Attributes

| Name | Description | Type | Default | |------|-------------|------|---------| | type | type of input | 'text' \| 'textarea' \| 'number' \| 'password' \| 'email' \| 'search' \| 'tel' \| 'url' | text | | model-value / v-model | binding value | string \| number | — | | model-modifiers | v-model modifiers | { lazy?: true, number?: true, trim?: true } | — | | maxlength | same as maxlength in native input | string \| number | — | | minlength | same as minlength in native input | string \| number | — | | show-word-limit | whether show word count | boolean | false | | word-limit-position | word count position | 'inside' \| 'outside' | inside | | placeholder | placeholder of Input | string | — | | clearable | whether to show clear button | boolean | false | | clear-icon | custom clear icon component | string \| Component | CircleClose | | formatter | specifies the format of the value | (value: string \| number) => string | — | | parser | specifies the value extracted from formatter input | (value: string) => string | — | | show-password | whether to show toggleable password input | boolean | false | | disabled | whether Input is disabled | boolean | false | | size | size of Input | 'large' \| 'default' \| 'small' | — | | prefix-icon | prefix icon component | string \| Component | — | | suffix-icon | suffix icon component | string \| Component | — | | rows | number of rows of textarea | number | 2 | | autosize | whether textarea has an adaptive height | boolean \| { minRows?: number, maxRows?: number } | false | | autocomplete | same as autocomplete in native input | string | off | | 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 | — | — | | resize | control the resizability | 'none' \| 'both' \| 'horizontal' \| 'vertical' | — | | autofocus | same as autofocus in native input | boolean | false | | form | same as form in native input | string | — | | aria-label | same as aria-label 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 \| CSSProperties \| CSSProperties[] \| string[] | {} | | inputmode | same as inputmode in native input | string | — |

Events

| Name | Description | Type | |------|-------------|------| | blur | triggers when Input blurs | (event: FocusEvent) => void | | focus | triggers when Input focuses | (event: FocusEvent) => void | | change | triggers when the input box loses focus or user presses Enter | (value: string \| number, evt?: Event) => void | | input | triggers when the Input value change | (value: string \| number) => void | | clear | triggers when the Input is cleared | (evt?: MouseEvent) => void | | keydown | triggers when a key is pressed down | (event: KeyboardEvent \| Event) => void | | mouseleave | triggers when the mouse leaves the Input element | (event: MouseEvent) => void | | mouseenter | triggers when the mouse enters the Input element | (event: MouseEvent) => void |

Slots

| Name | Description | |------|-------------| | prefix | content as Input prefix, only works when type is not 'textarea' | | suffix | content as Input suffix, only works when type is not 'textarea' | | prepend | content to prepend before Input, only works when type is not 'textarea' | | append | content to append after Input, only works when type is not 'textarea' | | password-icon | content as Input password icon, only works when show-password is true |

Exposes

| Name | Description | Type | |------|-------------|------| | blur | blur the input element | () => void | | clear | clear input value | () => void | | focus | focus the input element | () => void | | input | HTML input element | Ref | | ref | HTML element, input or textarea | Ref | | resizeTextarea | resize textarea | () => void | | select | select the text in input element | () => void | | textarea | HTML textarea element | Ref | | textareaStyle | style of textarea | Ref | | isComposing | is input composing | Ref |

Usage Examples

Basic Input

  

import { ref } from 'vue'

const input = ref('')

Disabled Input

Clearable Input

Password Input

  

import { ref } from 'vue'

const password = ref('')

Input with Icons

  
  
  

import { ref } from 'vue'
import { Calendar, Search } from '@element-plus/icons-vue'

const input = ref('')
const search = ref('')

Input with Slots

  
    Http://
  
  
  
    .com
  
  
  
    
      
        
        
      
    
    
      
    
  

import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'

const input = ref('')
const input2 = ref('')
const input3 = ref('')
const select = ref('1')

Textarea

  

import { ref } from 'vue'

const textarea = ref('')

Auto-resize Textarea

Word Limit

Formatter

   `$ ${value}`.replace(/\B(?=(\d{3})+(?!\d))/g, ',')"
    :parser="value => value.replace(/\$\s?|(,*)/g, '')"
    placeholder="Please input amount"
  />

Sizes

v-model Modifiers

Common Issues

1. Input Width Expands with Clearable

When the clearable icon appears, the input width may expand. Set a fixed width:

2. Textarea Height Issues

Use autosize for dynamic height:

3. Chinese Input Method Issues

Use isComposing expose to check composition state:

  

import { ref } from 'vue'

const inputRef = ref()

const handleKeydown = () => {
  if (inputRef.value?.isComposing) return
  // Handle keydown
}

Component Interactions

With Form Validation

  
    
      
    
    
      
    
  

import { ref, reactive } from 'vue'

const formRef = ref()
const form = reactive({
  username: '',
  password: ''
})

const rules = {
  username: [
    { required: true, message: 'Please input username', trigger: 'blur' }
  ],
  password: [
    { required: true, message: 'Please input password', trigger: 'blur' },
    { min: 6, message: 'Password must be at least 6 characters', trigger: 'blur' }
  ]
}

With Search

  

import { ref } from 'vue'
import { Search } from '@element-plus/icons-vue'

const searchQuery = ref('')

const handleSearch = (value) => {
  // Debounce search
  console.log('Searching:', value)
}

Best Practices

1. Use appropriate type: Use correct input type for better mobile keyboards
2. Provide placeholder: Always provide meaningful placeholder text
3. Validate input: Use form validation for required fields
4. Limit length: Use maxlength for bounded input
5. Clearable for search: Make search inputs clearable
6. Password visibility: Use show-password for password fields

Source & license

This open-source skill is cataloged on AgentStack and links to its original source — we do not rehost the code.

• Author: jiaiyan
• Source: jiaiyan/element-plus-skills
• License: MIT
• Homepage: https://skills.sh/jiaiyan/element-plus-skills/element-plus-skills

Install and usage instructions live in the source repository linked above.