Inputs

사용자에게 텍스트 입력을 받는 필드입니다. 다양한 유형(타입)과 상태(state)를 지원합니다.

Figma 컴포넌트: Base components/Inputs, Textarea input field

Default

기본 입력 필드입니다. 라벨 우측의 *(필수)는 브랜드 그린, 우측 ? 헬프 아이콘은 선택적으로 표시할 수 있습니다.

Email*

This is a hint text to help user.

Email*

This is a hint text to help user.

Email*

This is a hint text to help user.

Email*

This is a hint text to help user.

Leading Dropdown

왼쪽에 드롭다운이 있는 입력 필드입니다. 국가 코드, 통화 등 prefix 선택에 사용합니다.

Phone number*

This is a hint text to help user.

Phone number*

This is a hint text to help user.

Trailing Dropdown

오른쪽에 드롭다운이 있는 입력 필드입니다. 단위 선택 등에 사용합니다.

Sale amount*

This is a hint text to help user.

Sale amount*

This is a hint text to help user.

Leading Text

왼쪽에 고정 텍스트가 있는 입력 필드입니다. URL 입력 등에 사용합니다.

Website*

http://

This is a hint text to help user.

Website*

http://

This is a hint text to help user.

Payment Input

카드 결제 입력 필드입니다.

Card number*

This is a hint text to help user.

Card number*

This is a hint text to help user.

Trailing Button

오른쪽에 버튼이 있는 입력 필드입니다. 복사, 검색 등의 액션에 사용합니다.

Website*

This is a hint text to help user.

Website*

This is a hint text to help user.

Size

sm, md 두 가지 사이즈를 지원합니다.

Size SM

Size MD

Destructive

에러 상태입니다. 보더는 border-error-subtle, hint는 text-error-primary(레드)로 바뀌고 우측에 알림 아이콘이 표시됩니다. focus 시 보더가 border-error로 진해집니다.

Email*

This is an error message.

Email*

This is an error message.

Phone number*

This is an error message.

Website*

http://

This is an error message.

Textarea

여러 줄 텍스트 입력 영역입니다.

Default

Description*

This is a hint text to help user.

Description*

A little about the company and the team that you'll be working with.

This is a hint text to help user.

Description*

A little about the company and the team that you'll be working with.

This is a hint text to help user.

Description*

This is a hint text to help user.

Destructive

Description*

A little about the company and the team that you'll be working with.

This is an error message.

Description*

A little about the company and the team that you'll be working with.

This is an error message.

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	`-`	힌트 또는 에러 메시지
`leadingIcon`	ReactNode	`-`	왼쪽 아이콘 (`type=default`)
`leadingText`	string	`-`	왼쪽 고정 텍스트
`leadingDropdown`	string	`-`	왼쪽 드롭다운 텍스트
`trailingDropdown`	string	`-`	오른쪽 드롭다운 텍스트
`trailingButton`	string	`-`	오른쪽 버튼 텍스트
`paymentBrand`	string	`-`	결제 브랜드 색상
`tags`	string[]	`[]`	태그 목록

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[]	`[]`	태그 목록

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`

Tags Toggles