7onicDESIGN SYSTEM

Input

Input은 텍스트 데이터를 입력받는 기본 폼 요소입니다. 이메일, 비밀번호, 검색 등 다양한 종류의 텍스트 입력을 지원합니다.

2
Variants
5
Sizes
2
Icon Slot
Field
Field

Playground

미리보기
defaultD
Variant
Size
Radius
Icon
State
Field
Focus
<Input placeholder="Type here..." />

Variants

Default
일반 폼에 쓰는 기본 보더 스타일
일반 폼
Filled
돋보여야 할 입력란에 쓰는 배경 강조 스타일
검색 바, 주요 입력

Sizes

xs
높이36px
좌우 패딩12px
폰트13px
아이콘14px
sm
높이40px
좌우 패딩12px
폰트14px
아이콘14px
default
높이44px
좌우 패딩16px
폰트16px
아이콘16px
lg
높이48px
좌우 패딩16px
폰트16px
아이콘16px
xl
높이56px
좌우 패딩16px
폰트16px
아이콘16px

터치 타겟: WCAG 2.5.8 기준 최소 24px 터치 영역이 필요합니다. 가장 작은 xs(36px)도 기준을 충족합니다.

iOS Safari 대응: 폰트 크기 16px 이상에서 iOS Safari의 자동 줌을 방지할 수 있습니다. default 이상 크기는 16px 폰트, 16px 아이콘을 사용합니다.

Features

With Icons

<Input leftIcon={<Search />} placeholder="검색..." />
<Input rightIcon={<Mail />} placeholder="이메일 주소" />
<Input leftIcon={<Lock />} rightIcon={<Eye />} type="password" placeholder="비밀번호" />

States

Default정상

0/50

Error에러
Disabled비활성

포커스 상태

focusRing: false(기본값): 클릭 시 보더 변화만, 키보드 Tab 시 포커스 링 자동 표시. focusRing: true: 항상 포커스 링 표시.

API

Props

variant"default"
"default" | "filled"

인풋 시각 스타일

size"default"
"xs" | "sm" | "default" | "lg" | "xl"

인풋 높이 (36/40/44/48/56px) - Input 전용 스케일

radius"default"
"none" | "sm" | "base" | "default" | "lg" | "xl" | "2xl" | "3xl" | "full"

모서리 둥글기 크기 (6px)

leftIconundefined
ReactNode

왼쪽 아이콘

rightIconundefined
ReactNode

오른쪽 아이콘

focusRingfalse
boolean

커스텀 포커스 링 표시. false여도 키보드 조작 시 자동 표시

errorundefined
boolean

에러 상태 (빨간 보더)

disabledundefined
boolean

비활성 상태

placeholderundefined
string

플레이스홀더 텍스트

typeundefined
string

인풋 타입 (text, email, password 등). HTML 기본값: text

Field

errorfalse
boolean

에러 상태. Field.Error와 Input에 자동 전파

disabledfalse
boolean

비활성 상태. Field.Label과 Input에 자동 전파

gap"default"
"none" | "xs" | "sm" | "default" | "lg"

자식 요소 간 간격 (0 / 4 / 6 / 8 / 12px)

Field.Label

requiredfalse
boolean

필수 마크(*)를 라벨 끝에 표시

Anatomy

1
2
Email address
4
3
user@example.com
5
6
Please enter a valid email address
1
Field
Field 래퍼
2
Label
라벨
3
Input Area
텍스트 입력
4
Left Icon
왼쪽 아이콘 (선택)
5
Right Icon
오른쪽 아이콘 (선택)
6
Helper Text
보조 텍스트 (선택)

Best Practices

✓

권장

  • ✓반드시 라벨을 붙이기 (또는 aria-label)
  • ✓적절한 input type 사용 (email, tel 등)
  • ✓에러 시 명확한 피드백 표시
  • ✓충분한 터치 영역 확보 (WCAG 2.5.8: 24px 이상)
✕

지양

  • ✗플레이스홀더를 라벨 대용으로 사용하지 않기
  • ✗불필요한 autocomplete를 끄지 않기
  • ✗에러 표시가 색상만으로 되지 않도록 하기
  • ✗입력 제한을 둘 경우 사전에 명시하기

Accessibility

키보드 조작

Tab포커스 이동
Enter폼 제출
Esc입력 취소

WCAG 2.2 준수

  • 포커스 인디케이터
  • aria-invalid (에러 시)
  • autocomplete 지원
  • 대비율 4.5:1 이상