Input 입력 상자

입력 상자 컴포넌트로, 텍스트 입력, 비밀번호, 글자 수 세기 등의 기능을 지원합니다.

기본 사용법

현재 값:

vue

<script setup lang="ts">
import { ref } from 'vue'

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

<template>
  <!-- 기본 입력 상자 -->
  <LhInput v-model="value" placeholder="내용을 입력하세요" />
</template>

vue

<script>
export default {
  data() {
    return { value: '' }
  },
}
</script>

<template>
  <!-- 기본 입력 상자 -->
  <LhInput v-model="value" placeholder="내용을 입력하세요" />
</template>

다양한 유형

vue

<script setup lang="ts">
import { ref } from 'vue'

const text = ref('')
const password = ref('')
const clearable = ref('미리 채워진 값')
</script>

<template>
  <LhInput v-model="text" placeholder="텍스트 입력" />
  <LhInput v-model="password" type="password" placeholder="비밀번호 입력" show-password />
  <LhInput v-model="clearable" placeholder="지우기 가능 입력" clearable />
</template>

vue

<script>
export default {
  data() {
    return {
      text: '',
      password: '',
      clearable: '미리 채워진 값',
    }
  },
}
</script>

<template>
  <LhInput v-model="text" placeholder="텍스트 입력" />
  <LhInput v-model="password" type="password" placeholder="비밀번호 입력" show-password />
  <LhInput v-model="clearable" placeholder="지우기 가능 입력" clearable />
</template>

비활성화 상태

vue

<script setup lang="ts">
import { ref } from 'vue'

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

<template>
  <LhInput v-model="value" disabled placeholder="비활성화된 입력 상자" />
</template>

vue

<script>
export default {
  data() {
    return { value: '' }
  },
}
</script>

<template>
  <LhInput v-model="value" disabled placeholder="비활성화된 입력 상자" />
</template>

글자 수 세기

0/10

vue

<script setup lang="ts">
import { ref } from 'vue'

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

<template>
  <LhInput v-model="value" :maxlength="10" show-word-limit placeholder="최대 10글자" />
</template>

vue

<script>
export default {
  data() {
    return { value: '' }
  },
}
</script>

<template>
  <LhInput v-model="value" :maxlength="10" show-word-limit placeholder="최대 10글자" />
</template>

슬롯

vue

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

<template>
  <LhInput v-model="value">
    <template #prefix>🔍</template>
  </LhInput>
  <LhInput v-model="value">
    <template #suffix>단위</template>
  </LhInput>
</template>

vue

<script>
export default {
  data() {
    return { value: '' }
  },
}
</script>

<template>
  <LhInput v-model="value">
    <template #prefix>🔍</template>
  </LhInput>
  <LhInput v-model="value">
    <template #suffix>단위</template>
  </LhInput>
</template>

커스텀 테마

vue

<script setup lang="ts">
import { LhConfigProvider, LhInput } from '@lh-ui/vue3'

const cerblueTheme = {
  'primary-color': '#2B4C7C',
  'primary-color-hover': '#3D649E',
  'primary-color-bg': '#E8EDF3',
  'bg-color': '#F0F4F8',
}
</script>

<template>
  <!-- theme-vars로 테마 변수 커스터마이징 -->
  <LhConfigProvider :theme-vars="cerblueTheme">
    <LhInput placeholder="청화자 입력 상자" />
  </LhConfigProvider>
</template>

vue

<script>
import { LhConfigProvider, LhInput } from '@lh-ui/vue3'

export default {
  data() {
    return {
      cerblueTheme: {
        'primary-color': '#2B4C7C',
        'primary-color-hover': '#3D649E',
        'primary-color-bg': '#E8EDF3',
        'bg-color': '#F0F4F8',
      },
    }
  },
}
</script>

<template>
  <!-- theme-vars로 테마 변수 커스터마이징 -->
  <LhConfigProvider :theme-vars="cerblueTheme">
    <LhInput placeholder="청화자 입력 상자" />
  </LhConfigProvider>
</template>

sx 빠른 레이아웃

sx 프로퍼티로 간격을 빠르게 설정할 수 있으며, 별도의 CSS를 작성할 필요가 없습니다.

vue

<script setup lang="ts">
</script>

<template>
  <!-- 위쪽 간격 2 -->
  <LhInput placeholder="위쪽 간격 2" :sx="{ mt: 2 }" />
  <!-- 가로 간격 1, 아래쪽 간격 3 -->
  <LhInput placeholder="가로 간격 1, 아래쪽 간격 3" :sx="{ mx: 1, mb: 3 }" />
</template>

vue

<script>
export default {}
</script>

<template>
  <!-- 위쪽 간격 2 -->
  <LhInput placeholder="위쪽 간격 2" :sx="{ mt: 2 }" />
  <!-- 가로 간격 1, 아래쪽 간격 3 -->
  <LhInput placeholder="가로 간격 1, 아래쪽 간격 3" :sx="{ mx: 1, mb: 3 }" />
</template>

sx는 8px 기준을 따릅니다: mt: 2 → marginTop: 16px. 전체 속성은 sx 빠른 레이아웃을 참고하세요.

다국어

vue

<script setup lang="ts">
import { ref, computed } from 'vue'
import { LhConfigProvider, LhInput, LhButton, zhCN, enUS } from '@lh-ui/vue3'

const locale = ref('zh-CN')
const messages = computed(() => locale.value === 'zh-CN' ? zhCN : enUS)
</script>

<template>
  <!-- ConfigProvider로 언어 팩 주입 -->
  <LhConfigProvider :locale="messages">
    <LhInput />
    <LhButton @click="locale = locale === 'zh-CN' ? 'en-US' : 'zh-CN'">언어 전환</LhButton>
  </LhConfigProvider>
</template>

vue

<script>
import { LhConfigProvider, LhInput, LhButton, zhCN, enUS } from '@lh-ui/vue3'

export default {
  components: { LhConfigProvider, LhInput, LhButton },
  data() {
    return { locale: 'zh-CN' }
  },
  computed: {
    messages() {
      return this.locale === 'zh-CN' ? zhCN : enUS
    },
  },
  methods: {
    toggleLocale() {
      this.locale = this.locale === 'zh-CN' ? 'en-US' : 'zh-CN'
    },
  },
}
</script>

<template>
  <!-- ConfigProvider로 언어 팩 주입 -->
  <LhConfigProvider :locale="messages">
    <LhInput />
    <LhButton @click="toggleLocale">언어 전환</LhButton>
  </LhConfigProvider>
</template>

크기와 읽기 전용

vue

<script setup lang="ts">
import { ref } from 'vue'

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

<template>
  <LhInput v-model="value" size="small" placeholder="small" />
  <LhInput v-model="value" size="medium" placeholder="medium" />
  <LhInput v-model="value" size="large" placeholder="large" />
  <LhInput v-model="value" readonly placeholder="읽기 전용 입력 상자" />
</template>

vue

<script>
export default {
  data() {
    return { value: '' }
  },
}
</script>

<template>
  <LhInput v-model="value" size="small" placeholder="small" />
  <LhInput v-model="value" size="medium" placeholder="medium" />
  <LhInput v-model="value" size="large" placeholder="large" />
  <LhInput v-model="value" readonly placeholder="읽기 전용 입력 상자" />
</template>

접두·접미 아이콘

prefix-icon / suffix-icon으로 접두·접미 아이콘을 설정하며, 내장 LhIcon 아이콘 이름(예: search, date)을 사용합니다.

vue

<script setup lang="ts">
import { ref } from 'vue'

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

<template>
  <LhInput v-model="value" prefix-icon="search" placeholder="접두 아이콘" />
  <LhInput v-model="value" suffix-icon="date" placeholder="접미 아이콘" />
</template>

vue

<script>
export default {
  data() {
    return { value: '' }
  },
}
</script>

<template>
  <LhInput v-model="value" prefix-icon="search" placeholder="접두 아이콘" />
  <LhInput v-model="value" suffix-icon="date" placeholder="접미 아이콘" />
</template>

네이티브 속성과 자동 높이 조정

autocomplete, native-type, autofocus, minlength 등 네이티브 속성은 내부 입력 상자로 전달됩니다; autosize는 textarea가 내용에 따라 높이를 자동으로 조정하게 합니다.

vue

<script setup lang="ts">
import { ref } from 'vue'

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

<template>
  <LhInput v-model="value" autocomplete="off" native-type="text" :minlength="3" placeholder="autocomplete off" />
  <LhInput v-model="value" autofocus placeholder="자동 포커스" />
  <LhInput v-model="value" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="자동 높이 조정" />
</template>

vue

<script>
export default {
  data() {
    return { value: '' }
  },
}
</script>

<template>
  <LhInput v-model="value" autocomplete="off" native-type="text" :minlength="3" placeholder="autocomplete off" />
  <LhInput v-model="value" autofocus placeholder="자동 포커스" />
  <LhInput v-model="value" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }" placeholder="자동 높이 조정" />
</template>

Input API

Props

프로퍼티	설명	타입	기본값
modelValue	바인딩 값	`string`	—
type	입력 상자 유형	`"number" \| "text" \| "textarea" \| "password" \| "email" \| "url" \| "tel" \| "date" \| "time"`	`'text'`
size	크기	`"small" \| "medium" \| "large" \| "mini" \| "x-large"`	`'medium'`
disabled	비활성화 상태	`boolean`	`false`
readonly	읽기 전용 상태	`boolean`	`false`
placeholder	플레이스홀더 텍스트	`string`	—
maxlength	최대 입력 길이	`number`	—
minlength	최소 입력 길이	`number`	—
showWordLimit	글자 수 표시 여부	`boolean`	`false`
clearable	지우기 허용 여부	`boolean`	`false`
prefixIcon	접두 아이콘 이름(내장 LhIcon 아이콘)	`LhIconName`	—
suffixIcon	접미 아이콘 이름(내장 LhIcon 아이콘)	`LhIconName`	—
autofocus	마운트 시 자동 포커스	`boolean`	`false`
autocomplete	네이티브 autocomplete	`string`	—
nativeType	네이티브 type	`string`	—
autosize	textarea 자동 높이 조정	`boolean \| { minRows?: number; maxRows?: number; }`	`false`
resize	크기 조정 핸들 방향	`"none" \| "both" \| "horizontal" \| "vertical"`	`'vertical'`
name	네이티브 폼 이름	`string`	—
rows	textarea 행 수	`number`	—
tabindex	네이티브 tabindex	`string \| number`	—
form	네이티브 form	`string`	—
inputStyle	입력 요소 인라인 스타일	`{ [x: string]: string; }`	—
label	입력 상자 라벨	`string`	—
themeVars	컴포넌트 수준 테마 변수, ConfigProvider 설정을 덮어씀	`{ [x: string]: string; }`	—
bgPattern	컴포넌트 수준 배경 문양, ConfigProvider 설정을 덮어씀	`string`	—
sx	sx 빠른 레이아웃 속성	`LhSxProps`	—

Events

이벤트	설명	콜백 매개변수
update:modelValue	값 업데이트 이벤트	`(value: string)`
input	입력 이벤트	`(value: string)`
change	값 변경 이벤트	`(value: string)`
focus	포커스 받을 때 이벤트	`(event: FocusEvent)`
blur	포커스 잃을 때 이벤트	`(event: FocusEvent)`
clear	지워질 때 이벤트	—
keydown	네이티브 keydown 이벤트	`(event: KeyboardEvent)`

Slots

슬롯	설명
prefix	입력 상자 앞부분 콘텐츠
suffix	입력 상자 뒷부분 콘텐츠

타입 정의

이 컴포넌트가 외부로 노출하는 TypeScript 타입 구조는 다음과 같습니다(packages/components/input/src/types.ts와 @lh-ui/share/core/* 소스에서 자동 추출, 각 항목을 클릭하여 전체 정의를 펼쳐 볼 수 있습니다; 프로퍼티 설명은 위쪽 Props 표를 참고하세요):

LhInputType

export type LhInputType = typeof LH_INPUT_TYPE_CONST[keyof typeof LH_INPUT_TYPE_CONST]

LhInputSize

/**
 * Input 크기
 */
export type LhInputSize = typeof LH_SIZE_CONST[keyof typeof LH_SIZE_CONST]

LhInputState

export type LhInputState = typeof LH_INPUT_STATE_CONST[keyof typeof LH_INPUT_STATE_CONST]

LhInputProps

/**
 * Input Props 인터페이스
 */
export interface LhInputProps {
  modelValue?: string
  type?: LhInputType
  size?: LhInputSize
  disabled?: boolean
  readonly?: boolean
  placeholder?: string
  maxlength?: number
  minlength?: number
  showWordLimit?: boolean
  clearable?: boolean
  /** 접두 아이콘 이름(내장 LhIcon 아이콘, 예: `search`) */
  prefixIcon?: LhIconName
  /** 접미 아이콘 이름(내장 LhIcon 아이콘, 예: `date`) */
  suffixIcon?: LhIconName
  autofocus?: boolean
  autocomplete?: string
  nativeType?: string
  autosize?: boolean | { minRows?: number; maxRows?: number }
  resize?: 'none' | 'both' | 'horizontal' | 'vertical'
  name?: string
  rows?: number
  tabindex?: number | string
  form?: string
  inputStyle?: Record<string, string>
  label?: string
  /** 컴포넌트 수준 테마 변수, ConfigProvider 설정을 덮어씀 */
  themeVars?: Record<string, string>
  /** 컴포넌트 수준 배경 문양, ConfigProvider 설정을 덮어씀 */
  bgPattern?: string
  /** 빠른 레이아웃 속성 */
  sx?: LhSxProps
}

LhIconName _{(출처: @lh-ui/share/core/icon (svgs.ts))}

export type LhIconName = keyof typeof LH_ICON_SVGS_CONST

Input 입력 상자 ​

기본 사용법 ​

다양한 유형 ​

비활성화 상태 ​

글자 수 세기 ​

슬롯 ​

커스텀 테마 ​

sx 빠른 레이아웃 ​

다국어 ​

크기와 읽기 전용 ​

접두·접미 아이콘 ​

네이티브 속성과 자동 높이 조정 ​

Input API ​

Props ​

Events ​

Slots ​

타입 정의 ​