Skip to Content
ComponentsIcignalInput

Input

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

개요

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

주요 특징

  • ✅ 다양한 크기: xs, sm, md, lg, xl
  • ✅ 입력 타입: text, email, url, search 등
  • ✅ FormItem 통합: 레이블, 설명, 에러 메시지
  • ✅ 접근성: aria-invalid 자동 설정
  • ✅ 디자인 토큰: 테마 커스터마이징 지원

Sizes

States

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

사용 예시

예시 1: 리포트 설정 폼

리포트 이름과 설명을 입력합니다.

쉼표로 구분하여 입력하세요

예시 2: 데이터 소스 연결

외부 데이터 소스 정보를 입력합니다.

API Reference

Props

PropTypeDefaultDescription
typestring"text"입력 타입
size"xs" | "sm" | "md" | "lg" | "xl"-컴포넌트 크기
disabledbooleanfalse비활성화 여부
readOnlybooleanfalse읽기 전용 여부
labelstring-필드 레이블
labelWidthstring | number-레이블 너비
requiredbooleanfalse필수 여부
orientation"horizontal" | "vertical""horizontal"레이블-필드 배치 방향
descriptionstring-설명 텍스트
errorstring-에러 메시지
classNamestring-추가 CSS 클래스

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

기본 사용법

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

접근성

ARIA 속성

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

권장 사항

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

관련 컴포넌트

Last updated on
DatePickerInputNumber