Input 입력 상자

텍스트/여러 줄 입력입니다. 접두·접미 아이콘, 지우기, 글자 수 세기, maxlength 잘라내기와 폼 유효성 검사 연동을 지원합니다.

입력 상자 형태

<template>
  <div class="demo-col" style="gap: 18px">
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap">
      <LhInput v-model="text" placeholder="내용을 입력하세요" clearable name="title" />
      <LhInput v-model="text" prefix-icon="search" suffix-icon="close" placeholder="접두/접미 아이콘" />
    </div>
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap">
      <LhInput v-model="secret" type="password" placeholder="비밀번호" autocomplete="new-password" />
      <LhInput v-model="text" readonly placeholder="읽기 전용" />
      <LhInput v-model="text" disabled placeholder="비활성화 상태" />
    </div>
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap; align-items: center">
      <LhInput v-model="text" size="small" placeholder="small" />
      <LhInput v-model="text" size="medium" placeholder="medium" />
      <LhInput v-model="text" size="large" placeholder="large" />
    </div>
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap">
      <LhInput v-model="poem" type="textarea" :rows="2" placeholder="여러 줄 텍스트 (rows=2)" resize="vertical" />
      <LhInput v-model="poem" type="textarea" autosize placeholder="행 높이 자동 조정" />
    </div>
    <div class="demo-row" style="gap: 12px; flex-wrap: wrap">
      <LhInput v-model="limited" :maxlength="20" show-word-limit placeholder="글자 수 세기" />
      <LhInput v-model="text" label="플로팅 라벨" placeholder="placeholder와 상호 배타적" />
    </div>
    <p class="demo-note">현재 값: {{ text || '(빈 값)' }}</p>
  </div>
</template>

<script>
export default {
  data: () => ({ text: '', secret: '', poem: '', limited: '' }),
}
</script>

Props

프로퍼티	설명	타입	기본값
v-model	바인딩 값 (model: modelValue/input)	string	—
type	컨트롤 유형	'text' \| 'textarea' \| 'password' \| …	'text'
size	크기	'small' \| 'medium' \| 'large'	'medium'
placeholder	플레이스홀더 텍스트, 생략 시 언어 팩 사용	string	t('input.placeholder')
clearable	지우기 버튼 표시	boolean	false
prefixIcon / suffixIcon	접두·접미 아이콘, 내장 LhIcon 아이콘 이름 사용	string	—
maxlength / minlength	네이티브 길이 제한	number	—
showWordLimit	글자 수 표시 (maxlength 필요)	boolean	false
autosize	textarea 행 높이 자동 조정	boolean \| {minRows,maxRows}	false
disabled / readonly	비활성화 / 읽기 전용	boolean	false
autofocus	마운트 시 자동 포커스	boolean	false
autocomplete	네이티브 autocomplete	string	'off'
nativeType	네이티브 type (type=text일 때 적용)	string	'text'
resize	textarea 크기 조정 핸들 방향	'none' \| 'both' \| 'horizontal' \| 'vertical'	—
name / form	네이티브 name / form 속성	string	—
tabindex	네이티브 tabindex	number \| string	—
inputStyle	입력 요소 인라인 스타일	Record<string, string>	—
label	플로팅 라벨 (placeholder와 상호 배타적)	string	—
themeVars / bgPattern / sx	테마 덮어쓰기	—	—

이벤트

이벤트	설명	콜백 매개변수
input	v-model 이벤트	(val, e)
change	값이 변경될 때 발생	—
focus	포커스를 받을 때 발생	—
blur	포커스가 벗어날 때 발생	—
clear	지워질 때 발생	—
keydown	키를 누를 때 발생	—

폼 연동

LhFormItem 내에 있고 유효성 검사에 실패하면, 네이티브 컨트롤에 자동으로 aria-invalid="true"가 부여됩니다.