Skip to Content
ComponentsFoundationFormInput

Input

텍스트 입력을 받는 인풋 컴포넌트입니다.

개요

Input은 사용자로부터 텍스트 정보를 입력받는 기본 폼 요소입니다. 다양한 타입과 상태를 지원하며, 아이콘과 함께 사용할 수 있습니다.

주요 특징:

  • 다양한 Type (text, password, email, number, tel, url 등)
  • 4가지 State (default, focus, error, disabled)
  • 아이콘 지원 (prefix, suffix)
  • Clear 버튼
  • 비밀번호 표시/숨기기

사용 사례:

  • 로그인/회원가입 폼
  • 검색 입력
  • 설정 값 입력
  • 데이터 필터링

설치

npx @vortex/cli add input --package foundation

기본 사용법

import { Input } from "@vortex/ui-foundation";
 
export default function Example() {
  return <Input placeholder="Enter text..." />;
}

Types (타입)

Text (기본)

<Input type="text" placeholder="이름을 입력하세요" />

Password

<Input type="password" placeholder="비밀번호를 입력하세요" />

Email

<Input type="email" placeholder="이메일을 입력하세요" />

Number

<Input type="number" placeholder="숫자를 입력하세요" />

Tel

<Input type="tel" placeholder="전화번호를 입력하세요" />

URL

<Input type="url" placeholder="URL을 입력하세요" />

States (상태)

Default

<Input placeholder="기본 상태" />

Focus

<Input placeholder="포커스 시 강조" autoFocus />

Error

<Input
  placeholder="에러 상태"
  error
  errorMessage="올바른 이메일을 입력해주세요"
/>

Disabled

<Input placeholder="비활성화 상태" disabled />

아이콘

Prefix Icon

import { Search } from "lucide-react";
 
<Input placeholder="검색..." prefix={<Search size={16} />} />;

Suffix Icon

import { Mail } from "lucide-react";
 
<Input type="email" placeholder="이메일 입력" suffix={<Mail size={16} />} />;

Clear 버튼

<Input
  placeholder="검색어 입력"
  clearable
  onClear={() => console.log("cleared")}
/>

비밀번호 표시/숨기기

<Input type="password" placeholder="비밀번호" showPasswordToggle />

Props API

PropTypeDefaultDescription
type’text’ | ‘password’ | ‘email’ | ‘number’ | ‘tel’ | ‘url''text’인풋 타입
placeholderstring-플레이스홀더 텍스트
valuestring-입력 값
defaultValuestring-기본 입력 값
disabledbooleanfalse비활성화 상태
errorbooleanfalse에러 상태
errorMessagestring-에러 메시지
prefixReactNode-Prefix 아이콘
suffixReactNode-Suffix 아이콘
clearablebooleanfalseClear 버튼 표시
showPasswordTogglebooleanfalse비밀번호 토글 버튼
onChange(value: string) => void-값 변경 핸들러
onClear() => void-Clear 버튼 클릭 핸들러
classNamestring-추가 CSS 클래스

접근성

Input 컴포넌트는 WCAG 2.1 AA 기준을 준수합니다.

ARIA 속성:

  • aria-label 또는 <label> 연결 (필수)
  • aria-invalid="true" (에러 상태)
  • aria-describedby (에러 메시지 연결)

키보드 네비게이션:

  • Tab: 다음 요소로 포커스 이동
  • Shift + Tab: 이전 요소로 포커스 이동

스크린 리더 지원:

  • Label 텍스트 읽힘
  • Placeholder 안내
  • 에러 메시지 읽힘

예제

예제 1: 로그인 폼

export default function LoginForm() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
 
  return (
    <form className="space-y-md">
      <div>
        <label htmlFor="email">이메일</label>
        <Input
          id="email"
          type="email"
          placeholder="이메일을 입력하세요"
          value={email}
          onChange={setEmail}
        />
      </div>
      <div>
        <label htmlFor="password">비밀번호</label>
        <Input
          id="password"
          type="password"
          placeholder="비밀번호를 입력하세요"
          value={password}
          onChange={setPassword}
          showPasswordToggle
        />
      </div>
      <Button type="submit">로그인</Button>
    </form>
  );
}

예제 2: 검색 입력

import { Search, X } from "lucide-react";
 
export default function SearchInput() {
  const [query, setQuery] = useState("");
 
  return (
    <Input
      placeholder="검색어를 입력하세요"
      value={query}
      onChange={setQuery}
      prefix={<Search size={16} />}
      clearable
      onClear={() => setQuery("")}
    />
  );
}

예제 3: 폼 검증

export default function ValidatedInput() {
  const [email, setEmail] = useState("");
  const [error, setError] = useState("");
 
  const validate = (value: string) => {
    const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
    if (!emailRegex.test(value)) {
      setError("올바른 이메일 형식이 아닙니다");
    } else {
      setError("");
    }
  };
 
  return (
    <Input
      type="email"
      placeholder="이메일 입력"
      value={email}
      onChange={(value) => {
        setEmail(value);
        validate(value);
      }}
      error={!!error}
      errorMessage={error}
    />
  );
}

관련 컴포넌트

Last updated on
CheckboxRadio