Inputs
사용자에게 텍스트 입력을 받는 필드입니다. 다양한 유형과 상태를 지원합니다.
Figma 컴포넌트: Input field, Textarea input field, Verification code input field
Input Field
Type: Default
기본 텍스트 입력 필드입니다.
Type: Leading Dropdown
왼쪽에 드롭다운이 있는 입력 필드입니다. 국가 코드, 통화 선택 등에 사용합니다.
Type: Trailing Dropdown
오른쪽에 드롭다운이 있는 입력 필드입니다. 단위 선택 등에 사용합니다.
Type: Leading Text
왼쪽에 고정 텍스트가 있는 입력 필드입니다. URL 입력 등에 사용합니다.
Type: Payment Input
카드 결제 입력 필드입니다.
Type: Tags
태그를 입력할 수 있는 필드입니다. 사용자, 카테고리 태깅 등에 사용합니다.
Type: Trailing Button
오른쪽에 버튼이 있는 입력 필드입니다. 복사, 검색 등의 액션에 사용합니다.
Size
sm, md 두 가지 사이즈를 지원합니다.
Destructive
에러 상태의 입력 필드입니다. 유효성 검사 실패 시 사용합니다.
Textarea
Default
여러 줄 텍스트 입력 영역입니다.
Textarea with Tags
태그를 입력할 수 있는 Textarea입니다.
Textarea Destructive
Verification Code Input
인증 코드(OTP, 2FA 등)를 자릿수별로 입력받는 필드입니다. 각 자리마다 독립된 박스를 표시하며, 4자리와 6자리를 지원합니다.
Size
sm(64px), md(80px), lg(96px) 세 가지 사이즈를 지원합니다.
Digits: 4
4자리 인증 코드 입력 필드입니다.
Digits: 6
6자리 인증 코드 입력 필드입니다. 3자리씩 그룹화되어 가운데에 구분 기호가 표시됩니다.
Destructive
에러 상태의 인증 코드 입력 필드입니다.
Disabled
Props
Input
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | - | 레이블 텍스트 |
placeholder | string | '' | 플레이스홀더 텍스트 |
value | string | - | 입력 값 |
size | 'sm' | 'md' | 'md' | 입력 필드 크기 |
state | 'default' | 'filled' | 'focused' | 'disabled' | 'default' | 입력 필드 상태 |
destructive | boolean | false | 에러 상태 여부 |
type | 'default' | 'leading-dropdown' | 'trailing-dropdown' | 'leading-text' | 'payment' | 'tags' | 'trailing-button' | 'default' | 입력 필드 유형 |
required | boolean | false | 필수 표시 (*) 여부 |
helpIcon | boolean | false | 도움말 아이콘 표시 여부 |
hint | string | - | 힌트 또는 에러 메시지 |
leadingText | string | - | 왼쪽 고정 텍스트 (type=leading-text) |
leadingDropdown | string | - | 왼쪽 드롭다운 텍스트 (type=leading-dropdown) |
trailingDropdown | string | - | 오른쪽 드롭다운 텍스트 (type=trailing-dropdown) |
trailingButton | string | - | 오른쪽 버튼 텍스트 (type=trailing-button) |
tags | Array<string | { label: string, avatarSrc?: string }> | [] | 태그 목록 (type=tags). 객체 형태로 avatarSrc를 지정하면 아바타 이미지를 렌더링합니다. |
Textarea
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | - | 레이블 텍스트 |
placeholder | string | '' | 플레이스홀더 텍스트 |
value | string | - | 입력 값 |
state | 'default' | 'filled' | 'focused' | 'disabled' | 'default' | Textarea 상태 |
destructive | boolean | false | 에러 상태 여부 |
type | 'default' | 'tags' | 'default' | Textarea 유형 |
required | boolean | false | 필수 표시 (*) 여부 |
helpIcon | boolean | false | 도움말 아이콘 표시 여부 |
hint | string | - | 힌트 또는 에러 메시지 |
tags | string[] | [] | 태그 목록 (type=tags) |
VerificationCodeInput
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | - | 레이블 텍스트 |
value | string | '' | 입력된 코드 값 (문자열) |
size | 'sm' | 'md' | 'lg' | 'md' | 박스 크기 (64 / 80 / 96 px) |
digits | 4 | 6 | 4 | 입력 자릿수. 6일 경우 3자리씩 그룹화되며 구분 기호가 표시됨 |
state | 'default' | 'focused' | 'disabled' | 'default' | 컴포넌트 상태. focused일 때 value 다음 박스가 강조됨 |
destructive | boolean | false | 에러 상태 여부 |
hint | string | - | 힌트 또는 에러 메시지 |
Figma Variants
Input Field
| Property | Values |
|---|---|
| Size | sm md |
| Type | Default Leading dropdown Trailing dropdown Leading text Payment input Tags Trailing button |
| Destructive | True False |
| State | Placeholder Filled Focused Disabled |
Textarea
| Property | Values |
|---|---|
| Type | Default Tags |
| Destructive | True False |
| State | Placeholder Default Focused Disabled |
Verification Code Input Field
| Property | Values |
|---|---|
| Size | sm md lg |
| Digits | 4 6 |