Input

텍스트 입력, 비밀번호, 텍스트 영역 등 다양한 폼 입력 컴포넌트입니다.

설치

Terminal

npx @msub-core/ui-cli add input

사용법

TSX

import { Input, PasswordInput, Textarea } from "@msub-core/ui/components/input"

function MyComponent() {
  return (
    <form>
      <Input label="이메일" placeholder="[email protected]" />
      <PasswordInput label="비밀번호" placeholder="비밀번호를 입력하세요" />
      <Textarea label="메시지" placeholder="내용을 입력하세요" />
    </form>
  )
}

Input Props

Prop	Type	Default	Required	Description
label	string	-	No	입력 필드 레이블
helperText	string	-	No	하단 도움말 텍스트
error	string	-	No	에러 메시지 (표시 시 에러 스타일 적용)
variant	"default" \| "error" \| "success"	"default"	No	입력 필드 스타일
inputSize	"sm" \| "default" \| "lg"	"default"	No	입력 필드 크기
leftIcon	ReactNode	-	No	왼쪽 아이콘
rightIcon	ReactNode	-	No	오른쪽 아이콘
onRightIconClick	() => void	-	No	오른쪽 아이콘 클릭 핸들러
outline	boolean	false	No	테두리가 있는 아웃라인 스타일 적용
disabled	boolean	-	No	비활성화 여부

기본 Input

라벨이 있는 Input

도움말이 있는 Input

이것은 도움말 텍스트입니다.

아웃라인

outline prop으로 테두리가 있는 스타일을 적용할 수 있습니다.

라벨이 있는 아웃라인

아이콘이 있는 아웃라인

에러 상태

필수 입력 항목입니다.

크기

아이콘

상태

기본

에러

필수 입력 항목입니다.

성공

사용 가능한 이메일입니다.

비활성화

비밀번호 Input

눈 아이콘을 클릭하여 비밀번호를 표시하거나 숨길 수 있습니다.

비밀번호

비밀번호 확인

Textarea

메시지

에러 상태

최소 10자 이상 입력해주세요.

Textarea Props

Prop	Type	Default	Required	Description
label	string	-	No	입력 필드 레이블
helperText	string	-	No	하단 도움말 텍스트
error	string	-	No	에러 메시지

유효성 검사 예시

실시간으로 입력값을 검증하는 예시입니다.

이메일