Input 입력 상자

직접 입력으로 콘텐츠를 입력하고 검증하며, 제어 / 비제어, 글자 수 제한, 지우기, 여러 줄 자동 크기 조절 등을 지원합니다.

기본 사용법

제어 입력

현재 값: (비어 있음)

import { useState } from 'react'
import { LhInput } from '@lh-ui/react'

export default function Demo() {
  const [value, setValue] = useState('')

  return <LhInput value={value} onChange={(val) => setValue(val)} placeholder="제어 입력 상자" />
}

특징

지우기 / 글자 수 제한 / 비밀번호 / 여러 줄 자동 크기

0/10

import { LhInput } from '@lh-ui/react'

export default function Demo() {
  return (
    <>
      <LhInput placeholder="지울 수 있음" clearable />
      <LhInput placeholder="글자 수 제한" maxlength={10} showWordLimit />
      <LhInput placeholder="비밀번호 상자" type="password" />
      <LhInput
        placeholder="여러 줄 입력"
        type="textarea"
        autosize={{ minRows: 2, maxRows: 4 }}
      />
    </>
  )
}

Input Props

프로퍼티	설명	타입	선택 가능한 값	기본값
value	제어 값	string	—	—
defaultValue	비제어 기본값	string	—	—
type	기본 타입	'text' | 'password' | 'number' | 'email' | 'tel' | 'url' | 'search' | 'textarea' | ...	—	'text'
placeholder	플레이스홀더	string	—	언어 팩 폴백 (zh-CN: 请输入)
disabled	비활성화	boolean	—	false
readonly	읽기 전용	boolean	—	false
maxlength	최대 입력 길이 (초과 시 잘림)	number	—	—
showWordLimit	글자 수 통계 표시	boolean	—	false
clearable	지울 수 있음	boolean	—	false
showPassword	비밀번호 표시/숨김 (type이 password일 때 접미사에 눈 버튼 렌더링, React 최초)	boolean	—	false
autosize	여러 줄 자동 높이	boolean | { minRows?: number; maxRows?: number }	—	false
label	떠 있는 레이블	string	—	—
prefixIcon / suffixIcon	앞뒤 아이콘	LhIconName	—	—
size	크기	'large' | 'middle' | 'small'	—	ConfigProvider 따름
name	기본 name 속성	string	—	—
themeVars	컴포넌트 수준 테마 변수	Record<string, string>	—	—
sx	빠른 레이아웃 프로퍼티	SxProps	—	—

Input 이벤트

이벤트	설명	콜백 시그니처	Vue 대응
onChange	값 변화 (2개 인수)	(value: string, event: ChangeEvent) => void	@change
onInput	기본 입력 이벤트	(event: InputEvent) => void	@input
onFocus	포커스 획득	(event: FocusEvent) => void	@focus
onBlur	포커스 상실	(event: FocusEvent) => void	@blur
onClear	지우기 버튼 클릭	(event: MouseEvent) => void	@clear
onKeyDown	기본 키보드 이벤트	(event: KeyboardEvent) => void	@keydown

onChange의 2개 인수

onChange(value, event)는 lh-ui-plus의 emit('change', [val, e])와 같은 구조로, 마이그레이션이 쉽습니다. 자세한 내용은 마이그레이션 가이드를 참조하세요.

ref

forwardRef<HTMLInputElement | HTMLTextAreaElement> —— 포커스 가능한 기본 요소.

스타일

import '@lh-ui/react/style/input'