Input

텍스트 입력을 받는 기본 폼 컴포넌트

개요

Input 컴포넌트는 네이티브 <input> 요소를 래핑하여 일관된 스타일과 크기를 제공합니다. 다양한 HTML input 타입을 지원하며, disabled, readOnly, aria-invalid 상태 스타일을 포함합니다.

주요 특징

• ✅ 기본 상태: 입력 가능한 기본 상태 제공
• ✅ 포커스 상태: 포커스 시 시각적으로 구분되는 스타일
• ✅ 읽기 전용 상태: 읽기 전용(readOnly) 시각적 구분
• ✅ 오류 상태 표시: aria-invalid 기반 에러 스타일
• ✅ Placeholder: 입력 전 가이드 텍스트 제공
• ✅ 입력 가능 제어: disabled, readOnly 상태 지원
• ✅ 다양한 입력 타입: text, email, password, number, file 등
• ✅ 디자인 토큰: 테마 커스터마이징 지원

Sizes

Input은 5가지 크기를 지원합니다. 기본값은 md입니다.

<Input size="xs" placeholder="Extra Small" />
<Input size="sm" placeholder="Small" />
<Input size="md" placeholder="Medium (기본)" />
<Input size="lg" placeholder="Large" />
<Input size="xl" placeholder="Extra Large" />

사용 예시

기본 상태

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

<Input placeholder="내용을 입력하세요" />

포커스 상태

포커스 시 시각적으로 구분되는 스타일을 제공합니다. focus-visible 상태에서 border와 ring 스타일이 적용됩니다.

{/* 클릭하거나 Tab으로 포커스하면 focus-visible 스타일이 적용됩니다 */}
<Input placeholder="클릭하거나 Tab으로 포커스하세요" />

읽기 전용 상태

읽기 전용(readOnly) 상태를 시각적으로 구분합니다. 텍스트 선택은 가능하지만 수정할 수 없습니다.

<Input readOnly defaultValue="읽기 전용 내용입니다." />

오류 상태 표시

aria-invalid 속성으로 오류 상태를 시각적으로 표현합니다.

<Input aria-invalid defaultValue="잘못된 입력" />

Placeholder 제공

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

<Input placeholder="이름을 입력하세요" />
<Input type="email" placeholder="email@example.com" />

입력 가능 제어

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

<Input disabled defaultValue="비활성화 상태" />
<Input readOnly defaultValue="읽기 전용 상태" />

여러가지 입력 타입 제공

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

<Input type="text" placeholder="텍스트 (기본)" />
<Input type="email" placeholder="email@example.com" />
<Input type="password" placeholder="비밀번호" />
<Input type="number" placeholder="숫자" />
<Input type="tel" placeholder="010-1234-5678" />
<Input type="url" placeholder="https://example.com" />
<Input type="file" />

Label과 함께 사용

<Label htmlFor="email">이메일</Label>
<Input id="email" type="email" placeholder="email@example.com" />

API Reference

Props

Events

기본 사용법

import { Input } from "@vortex/ui-foundation"
 
<Input placeholder="내용을 입력하세요" />
<Input size="sm" placeholder="작은 크기" />
<Input type="email" placeholder="이메일" />
<Input disabled />
<Input readOnly defaultValue="읽기 전용" />

접근성

시맨틱 마크업

• 네이티브 <input> 요소 기반
• aria-invalid 속성으로 유효성 검증 에러 상태 전달
• 포커스 링 자동 적용 (focus-visible)

키보드 네비게이션

• Tab: 다음 입력 필드로 이동
• Shift + Tab: 이전 입력 필드로 이동

권장 사항

• ✅ Label과 함께 사용하여 접근성 보장 (htmlFor와 id 연결)
• ✅ 명확한 placeholder 텍스트 제공
• ✅ 에러 상태 시 aria-invalid 속성 사용
• ❌ placeholder만으로 라벨을 대체하지 않기

관련 컴포넌트

• Textarea: 여러 줄 텍스트 입력
• Label: 라벨
• Field: 라벨, 설명, 에러를 포함하는 폼 필드 래퍼
• Select: 드롭다운 선택