Input

Overview#

Input은 이름, 이메일, 검색어처럼 사용자가 직접 텍스트를 입력할 때 사용합니다. 레이블·도움말·오류 메시지를 함께 제공해 필요한 값과 현재 상태를 알려줍니다.

<label htmlFor="name">이름</label>
<Input id="name" size="md" placeholder="이름을 입력하세요" aria-describedby="name-help" />
<p id="name-help">예약에 사용할 이름을 입력하세요.</p>

Anatomy#

번호는 구성 요소를 식별하며 배치 순서를 고정하지 않습니다. startIcon과 endIcon으로 아이콘을 입력 영역 앞이나 뒤에 둘 수 있습니다. 동작 버튼은 장식용 아이콘 슬롯에 넣지 않습니다.

Variants#

원본 Input에는 별도의 시각적 variant prop이 없습니다. 기본형에 아이콘과 네이티브 type을 조합합니다.

Sizes#

원본 공통 Component size 9개를 사용합니다. 기본 md는 40px입니다. 터치 영역이 필요한 화면에서는 lg(44px) 이상을 선택합니다.

States#

Default, Focus, Error, Readonly, Disabled 상태를 지원합니다. 위 Live Preview에서 상태를 바꾸고 Tab으로 실제 포커스를 확인하세요.

readonly는 포커스와 텍스트 복사가 가능하며 폼 전송에 포함됩니다. disabled는 탭 순서와 폼 전송에서 제외됩니다.

Guidelines#

원본 색상 값을 보존합니다. 오류·placeholder 등의 대비는 사용하는 배경과 글자 크기에 맞게 확인합니다.

API#

네이티브 input 속성을 지원합니다. size는 HTML의 문자 수가 아닌 디자인 크기입니다. className은 실제 input, wrapperClassName은 컨테이너에 적용됩니다.

Code Example#

'use client';
import { useState } from 'react';
import { Input } from '@/components/input';

export default function NameField() {
  const [name, setName] = useState('');
  return (
    <div>
      <label htmlFor="name">이름</label>
      <Input id="name" name="name" autoComplete="name"
        value={name} onChange={e => setName(e.target.value)}
        aria-describedby="name-help" />
      <p id="name-help">예약자 이름을 입력해 주세요.</p>
    </div>
  );
}