Skip to Content
ComponentsIcignalInput

Input

텍스트를 입력할 수 있는 기본 입력 필드

개요

Input은 한 줄 텍스트 입력을 위한 폼 컴포넌트입니다. Foundation Input을 FormItem으로 감싸 레이블, 설명, 에러 메시지를 통합 제공합니다.

주요 특징

  • ✅ 기본 상태: 입력 가능한 기본 상태 제공
  • ✅ 필수값 표시: Label 좌측에 * 표시
  • ✅ 포커스 상태: 포커스 시 시각적으로 구분되는 스타일
  • ✅ 읽기 전용 상태: 읽기 전용(readOnly) 시각적 구분
  • ✅ 오류 상태 표시: error prop으로 에러 메시지와 스타일 자동 적용
  • ✅ 레이블 제공: label, labelWidth, orientation으로 레이블 배치
  • ✅ Placeholder: 입력 전 가이드 텍스트 제공
  • ✅ 값 초기화: clearable prop으로 삭제(X) 버튼 제공
  • ✅ 다양한 입력 타입: text, email, password, number, file 등
  • ✅ 디자인 토큰: 테마 커스터마이징 지원

Sizes

사용 예시

기본 상태

입력 가능한 기본 상태를 제공합니다.

필수값 표시

필수 입력 항목은 Label 좌측에 *(Asterisk)를 표시합니다.

포커스 상태

포커스 시 시각적으로 구분되는 스타일을 제공합니다.

읽기 전용 상태

읽기 전용(readOnly) 상태를 시각적으로 구분합니다.

오류 상태 표시

오류 발생 시 error prop으로 에러 메시지를 표시하고, 오류 스타일이 자동 적용됩니다.

레이블 제공

레이블(Label)을 제공하며, orientation으로 배치 방향을 설정합니다.

리포트를 구분할 수 있는 이름을 입력하세요

Placeholder 제공

입력 전 가이드 텍스트를 Placeholder로 제공하며, 입력 시 해당 텍스트는 제거됩니다.

값 초기화

clearable prop으로 입력 값 초기화를 위한 삭제(X) 버튼을 제공합니다. 값이 있으면 항상 버튼이 노출됩니다.

입력 가능 제어

disabled와 readOnly로 입력 가능 여부를 제어합니다.

여러가지 입력 타입 제공

Email, Password, Number, File 등 다양한 입력 타입을 제공합니다.

프로젝트팀 구현 항목: 아래 기능은 프로젝트 요구사항에 맞춰 직접 구현합니다.

  • 마스킹: 비밀번호 등 민감 정보의 마스킹 처리

API Reference

Props

PropTypeDefaultDescription
typestring"text"입력 타입
size"xs" | "sm" | "md" | "lg" | "xl"-컴포넌트 크기
disabledbooleanfalse비활성화 여부
readOnlybooleanfalse읽기 전용 여부
labelstring-필드 레이블
labelWidthnumber-레이블 너비
labelAlign"start" | "center" | "end"-레이블 가로 정렬
labelVerticalAlign"start" | "center" | "end"-레이블 세로 정렬
requiredbooleanfalse필수 여부 (Label에 * 표시)
orientation"horizontal" | "vertical""horizontal"레이블-필드 배치 방향
descriptionstring-설명 텍스트
errorstring-에러 메시지
clearablebooleanfalse값 초기화 버튼(X) 표시 여부
inputClassNamestring-Input 요소에 적용할 CSS 클래스
classNamestring-래퍼에 적용할 추가 CSS 클래스

<input> 요소의 기본 HTML 속성(placeholder, value, defaultValue 등)을 모두 지원합니다.

Events

EventTypeDescription
onChange(e: ChangeEvent<HTMLInputElement>) => void값 변경 시 호출
onFocus(e: FocusEvent<HTMLInputElement>) => void포커스 시 호출
onBlur(e: FocusEvent<HTMLInputElement>) => void블러 시 호출
onKeyDown(e: KeyboardEvent<HTMLInputElement>) => void키 입력 시 호출

기본 사용법

import { Input } from "@vortex/ui-icignal"
 
<Input label="이름" placeholder="이름을 입력하세요" />
<Input label="이메일" type="email" required />
<Input label="검색" size="sm" placeholder="검색..." clearable />

접근성

ARIA 속성

<Input label="이메일" type="email" error="유효한 이메일을 입력해주세요" />

권장 사항

  • ✅ label을 제공하여 입력 필드 목적 전달
  • ✅ 에러 시 error prop으로 구체적 안내
  • ✅ aria-invalid 에러 상태 자동 설정
  • ❌ placeholder만으로 레이블 대체 지양

관련 컴포넌트

Last updated on
EditorInputNumber