Web - TextField

Definition

정의	TextField
최적화 대상	Desktop Mobile
기획 배포	완료
디자인 가이드 배포	완료
개발 코드 배포	완료

Principle

이용자가 텍스트를 입력할 수 있는 요소를 말합니다.

텍스트 필드의 상태를 명시적이게 시각적 표현을 제공해서 이용자가 혼동을 느끼지 않게 해야합니다. (비활성, 포커스, 유효성 검사 및 오류 상태) 유효성 검사의 경우 해당 텍스트 필드 밑에 보여줘서 어떤 것이 틀렸는지 명확히 전달해야 합니다.

텍스트 필드 입력 시 입력해야하는 텍스트 정보에 맞는 키보드를 띄워줍니다. (숫자면 숫자로 글자 입력이면 글자로)

개행 종류

single(singleline) : 한 줄
multi(multiline) : 정해진 높이값을 가지고 있는 textarea
auto(multiline auto size) : 글자 수에 따라 함께 늘어나는 형태, 특정 높이값에서 고정이 필요하다면 max-height를 가지고 있음

Spec

Guide

*제약사항이 있을 경우 제약 이상의 글자 입력 시, 입력이 되지 않습니다. (제약에 대한 사항은 기획서 참고)

Size, Property

*아이콘 버튼의 경우 개행 종류가 single 일 때 적용합니다.

	Large	Medium	Small
Height	48px	40px	32px
Width	432px	188px	188px
radius	14px	14px	10px
text	font size : form2 font weight : regular textLineType : single일 경우, 행간 singleLine 적용 그 외 form2에 적용한 행간 적용	font size : form2 font weight : regular textLineType : single일 경우, 행간 singleLine 적용 그 외 form2에 적용한 행간 적용	font size : form2 font weight : regular textLineType : single일 경우, 행간 singleLine 적용
error text	font size : caption2 font weight : regular 행간 singleLine 적용	font size : caption2 font weight : regular 행간 singleLine 적용	font size : caption2 font weight : regular 행간 singleLine 적용
iBtn	IconButton 참고 baseSize : small iconSize : 20 shapeType : rectangle	IconButton 참고 fillType : fill baseSize : small iconSize : 16 shapeType : rectangle	IconButton 참고 fillType : fill baseSize : small iconSize : 16 shapeType : rectangle
iBtn	문구 전체 삭제 버튼 fillType : fill baseSize : small iconSize : 20 shapeType : rectangle iconName : ic_delete iconFillType : fill	문구 전체 삭제 버튼 fillType : fill baseSize : small iconSize : 16 shapeType : rectangle iconName : ic_delete iconFillType : fill	문구 전체 삭제 버튼 fillType : fill baseSize : small iconSize : 16 shapeType : rectangle iconName : ic_delete iconFillType : fill

‌

Color 구성

‌

Color Key

텍스트필드에는 다양한 상태들이 존재합니다. 요소들의 컬러 변화로 상태들을 표현합니다.

	textColor	iconColor (IconButton)	borderColor	baseColor
normal : placeholder (hintText)가 노출된 상태	`ui_cpnt_textfield_text_hint`	추가 기능 : `ui_cpnt_button_icon_default`	`ui_cpnt_textfield_border_normal`	`ui_cpnt_textfield_base_normal`
focus	`ui_cpnt_textfield_text_hint`	delete : `ui_cpnt_button_icon_disabled` 추가 기능 : `ui_cpnt_button_icon_default`	`ui_cpnt_textfield_border_focus`	`ui_cpnt_textfield_base_normal`
typed : 값이 입력된 상태	`ui_cpnt_textfield_text_typed`	추가 기능 : `ui_cpnt_button_icon_default`	`ui_cpnt_textfield_border_normal`	`ui_cpnt_textfield_base_normal`
disabled	`ui_cpnt_textfield_text_disabled`	추가 기능 : `ui_cpnt_button_icon_disabled`	`ui_cpnt_textfield_border_disabled`	`ui_cpnt_textfield_base_disabled`
read_only	`ui_cpnt_textfield_text_disabled`	추가 기능 : `ui_cpnt_button_icon_disabled`	`ui_cpnt_textfield_border_disabled`	`ui_cpnt_textfield_base_disabled`
error	입력값 : `ui_cpnt_textfield_text_typed` 에러문구 : `ui_cpnt_textfield_text_error`	추가 기능 : `ui_cpnt_button_icon_default`	`ui_cpnt_textfield_border_error`	`ui_cpnt_textfield_base_normal`

colorTheme : dark

	textColor	iconColor (IconButton)	borderColor	baseColor
normal : placeholder (hintText)가 노출된 상태	`ui_cpnt_textfield_text_darktheme_hint`	추가 기능 : `ui_cpnt_textfield_icon_darktheme_default`	`ui_cpnt_textfield_border_darktheme_normal`	`ui_cpnt_textfield_base_darktheme_normal`
focus	`ui_cpnt_textfield_text_darktheme_hint`	delete : `ui_cpnt_textfield_icon_darktheme_disabled` 추가 기능 : `ui_cpnt_textfield_icon_darktheme_default`	`ui_cpnt_textfield_border_darktheme_focus`	`ui_cpnt_textfield_base_darktheme_normal`
typed : 값이 입력된 상태	`ui_cpnt_textfield_text_darktheme_enabled`	추가 기능 : `ui_cpnt_textfield_icon_darktheme_default`	`ui_cpnt_textfield_border_darktheme_normal`	`ui_cpnt_textfield_base_darktheme_normal`
disabled	`ui_cpnt_textfield_text_darktheme_disabled`	추가 기능 : `ui_cpnt_textfield_icon_darktheme_disabled`	`ui_cpnt_textfield_border_darktheme_normal`	`ui_cpnt_textfield_base_darktheme_disabled`
read_only	`ui_cpnt_textfield_text_darktheme_hint`	추가 기능 : `ui_cpnt_textfield_icon_darktheme_default`	`ui_cpnt_textfield_border_darktheme_normal`	`ui_cpnt_textfield_base_darktheme_disabled`
error	입력값 : `ui_cpnt_textfield_text_darktheme_enabled` 에러문구 : `ui_cpnt_textfield_text_darktheme_error`	추가 기능 : `ui_cpnt_textfield_icon_darktheme_default`	`ui_cpnt_textfield_border_darktheme_error`	`ui_cpnt_textfield_base_darktheme_normal`

colorTheme : transparent

	textColor	iconColor (IconButton)	borderColor	baseColor
normal : placeholder (hintText)가 노출된 상태	`ui_cpnt_textfield_text_colortheme_transparent_hint`	추가 기능 : `ui_cpnt_textfield_icon_colortheme_transparent_default`	`ui_cpnt_textfield_border_colortheme_transparent_normal`	`ui_cpnt_textfield_base_colortheme_transparent_normal`
focus	`ui_cpnt_textfield_text_colortheme_transparent_hint`	delete : `ui_cpnt_textfield_icon_colortheme_transparent_disabled` 추가 기능 : `ui_cpnt_textfield_icon_colortheme_transparent_default`	`ui_cpnt_textfield_border_colortheme_transparent_focus`	`ui_cpnt_textfield_base_colortheme_transparent_normal`
typed : 값이 입력된 상태	`ui_cpnt_textfield_text_colortheme_transparent_enabled`	추가 기능 : `ui_cpnt_textfield_icon_colortheme_transparent_default`	`ui_cpnt_textfield_border_colortheme_transparent_normal`	`ui_cpnt_textfield_base_colortheme_transparent_normal`
disabled	`ui_cpnt_textfield_text_colortheme_transparent_disabled`	추가 기능 : `ui_cpnt_textfield_icon_colortheme_transparent_disabled`	`ui_cpnt_textfield_border_colortheme_transparent_disabled`	`ui_cpnt_textfield_base_colortheme_transparent_disabled`
read_only	`ui_cpnt_textfield_text_colortheme_transparent_readonly`	추가 기능 : `ui_cpnt_textfield_icon_colortheme_transparent_readonly`	`ui_cpnt_textfield_border_colortheme_transparent_readonly`	`ui_cpnt_textfield_base_colortheme_transparent_readonly`
error	입력값 : `ui_cpnt_textfield_text_colortheme_transparent_enabled` 에러문구 : `ui_cpnt_textfield_text_colortheme_transparent_error`	추가 기능 : `ui_cpnt_textfield_icon_colortheme_transparent_default`	`ui_cpnt_textfield_border_colortheme_transparent_error`	`ui_cpnt_textfield_base_colortheme_transparent_normal`

Properties

responsiveMode

Added in 1.2

화면에 맞춰 늘릴 것인지 결정합니다. (반응형)

기획 지시사항

기획서 상 작성 방법 : Enum Values 중 하나를 사용함

Type	`enum`
Default	`'none'`

Enum Values Description
`'none'`	사용하지 않음
`'use'`	사용함

hintText

(일반적으로) placeholder에 표시할 텍스트 값입니다.

//TODO 제약조건

기획 지시사항

기획서 상 작성 방법 : 텍스트만 기술

Type	`number \| string \| object \| Array<string \| object> \| undefined \| null`
Default	-

defaultText

지정된 기본 값을 보여줘야 할 때 사용합니다.
*hintText와 함께 사용할 수 없습니다.

기획 지시사항

기획서 상 작성 방법 : 텍스트만 기술

Type	`number \| string \| object \| Array<string \| object> \| undefined \| null`
Default	-

errText (Deprecated in 1.2)

Deprecated in 1.2

~~에러 메세지 영역에서 표시할 텍스트 값입니다.~~

~~기획 지시사항~~

~~기획서 상 작성 방법 : 텍스트만 기술~~

Type	`number \| string \| object \| Array<string \| object> \| undefined \| null`
Default	-

validation

Added in 1.2

validation 조건과 에러 메세지 영역에서 표시할 텍스트 값을 부여할 수 있습니다.

기획 지시사항

기획서 상 작성 방법 : 기획자가 직접 prop을 기술하지 않음

Type	`{ [key: string]: any }`
Default	-

validationPoint

Added in 1.2

유효성 검증에 대한 시점 설정을 결정합니다. (validation이 부여되었을때 작동합니다.)

기획 지시사항

기획서 상 작성 방법 : Enum Values 중 하나를 사용함

Type	`enum`
Default	`'onBlur'`

Enum Values Description
`'onBlur'`	focus-out 시 반영
`'onChange'`	입력때마다 바로 반영

preventBlankMode

Added in 1.2

공백을 막는 행위에 대해 결정할 수 있습니다.

textLineType: single일때만 적용 가능합니다. (validation과 별개로 작동합니다.)

기획 지시사항

기획서 상 작성 방법 : Enum Values 중 하나를 사용함

Type	`enum`
Default	`'none'`

Enum Values Description
`'none'`	공백을 막지 않습니다.
`'trim'`	앞 뒤 공백을 막으며, submit 버튼을 누르는 시점에 적용됩니다.
`'all'`	모든 공백을 막으며, onChange 시점에 적용됩니다.

enterSubmitMode

Added in 1.3.1

Enter키를 통한 제출을 사용할 수 있습니다.

textLineType: single일때만 적용 가능합니다.

기획 지시사항

기획서 상 작성 방법 : Enum Values 중 하나를 사용함

Type	`enum`
Default	`'none'`

Enum Values Description
`'none'`	엔터키를 통해 제출할 수 없습니다.
`'use'`	엔터키를 통해 제출할 수 있습니다.

inputType

input의 유형을 설정합니다. input의 유형을 설정합니다. CSS input type을 참고합니다. (*값을 직접 입력하는 종류의 타입만 사용.)

text, email, tel, search, password, number, url 등을 사용할 수 있습니다.

기획 지시사항

기획서 상 작성 방법 : 정해진 텍스트만 기술

Type	`string`
Default	`'text'`

size

크기를 결정합니다.

기획 지시사항

기획서 상 작성 방법 : Enum Values 중 하나를 사용함

Type	`enum`
Default	`'large'`

Enum Values Description
`'small'`
`'medium'`
`'large'`
`'rlarge'`	화면 영역에 꽉 차게

textLineType

텍스트의 개행 방법을 결정합니다.

기획 지시사항

기획서 상 작성 방법 : Enum Values 중 하나를 사용함

Type	`enum`
Default	`'single'`

Enum Values Description

'single'

1줄 입력이 고려된 화면

'multi'

여러줄 입력이 고려된 화면

*size : small일 경우 해당되지 않음

'auto'

개행 / 내용 길어짐 시 자동 확장

*size : small일 경우 해당되지 않음

multiRows

textLineType : multi일 때, 지정할 문장의 열 수를 결정합니다. (높이값 결정)

기획 지시사항

기획서 상 작성 방법 : 숫자만 기술

Type	`number`
Default	`8`

autoMinRows

textLineType : auto일 때, 보여줄 문장의 최소 열 수를 결정합니다. (3으로 설정하면 3줄짜리 높이가 기본으로 보여짐)

기획 지시사항

기획서 상 작성 방법 : 숫자만 기술

Type	`number`
Default	`8`

autoMaxRows

textLineType : auto일 때, 보여줄 문장의 최대 열 수를 결정합니다. (10으로 설정하면 10줄까지 높이가 늘어남, 그 이상은 스크롤)

기획 지시사항

기획서 상 작성 방법 : 숫자만 기술

Type	`number`
Default	-

state

textfield의 상태를 결정합니다.

기획 지시사항

기획서 상 작성 방법 : Enum Values 중 하나를 사용함

Type	`enum`
Default	`'normal'`

Enum Values Description
`'normal'`	기본 상태 입니다.
`'read_only'`	읽기 전용입니다. (입력창 수정 불가)
`'disabled'`	비활성화 상태입니다.

iBtn1IconName

우측에서 1번째 아이콘 이름을 의미합니다. 사용할 수 있는 아이콘은 미리 정해져있습니다.

기획 지시사항

기획서 상 작성 방법 : Enum Values 중 하나를 사용함

Type	`enum`
Default	-

Enum Values Description
Icon 컴포넌트의 iconName 값 중 하나를 부여합니다. (ic_xxx의 형식입니다.)

iBtn1IconFillType

우측에서 1번째 아이콘의 형태를 결정합니다.

기획 지시사항

기획서 상 작성 방법 : Enum Values 중 하나를 사용함

Type	`enum`
Default	`'line'`

Enum Values Description
`'line'`	line 형태의 아이콘을 사용합니다.
`'fill'`	fill 형태의 아이콘을 사용합니다.

iBtn2IconName

우측에서 2번째 아이콘 이름을 의미합니다. 사용할 수 있는 아이콘은 미리 정해져있습니다.

기획 지시사항

기획서 상 작성 방법 : Enum Values 중 하나를 사용함

Type	`enum`
Default	-

Enum Values Description
Icon 컴포넌트의 iconName 값 중 하나를 부여합니다. (ic_xxx의 형식입니다.)

iBtn2IconFillType

우측에서 2번째 아이콘의 형태를 결정합니다.

기획 지시사항

기획서 상 작성 방법 : Enum Values 중 하나를 사용함

Type	`enum`
Default	`'line'`

Enum Values Description
`'line'`	line 형태의 아이콘을 사용합니다.
`'fill'`	fill 형태의 아이콘을 사용합니다.

colorTheme

컬러의 프리셋 테마입니다.

기획 지시사항

기획서 상 작성 방법 : Enum Values 중 하나를 사용함

Type	`enum`
Default	`'none'`

Enum Values Description

'none'

'dark'

*톤 설정과 상관없이 어두운 배경에 올라갈 때 사용합니다.

(spec 기술 참고)

'transparent'

*transparent 테마와 함께 사용하는것을 권장합니다.

(spec 기술 참고)

Added in 1.4

name*

Added in 1.2

form의 고유한 이름을 지정합니다.

기획 지시사항

기획서 상 작성 방법 : 기획자가 직접 prop을 기술하지 않음

Type	`Path<IFormValues>` (React-hook-form참고)
Default	-

max

Added in 1.2

textLineType : single일 때, input의 type이 최솟값 또는 최대값을 가질 수 있는 경우(date, datetime, datetime-local, month, number, range, time, week) 최댓값을 부여합니다.

기획 지시사항

기획서 상 작성 방법 : 숫자만 기술

Type	`number`
Default	-

maxLength

Added in 1.2

입력할 수 있는 최대 문자수를 부여합니다.

기획 지시사항

기획서 상 작성 방법 : 숫자만 기술

Type	`number`
Default	-

min

Added in 1.2

textLineType : single일 때, input의 type이 최솟값 또는 최대값을 가질 수 있는 경우(date, datetime, datetime-local, month, number, range, time, week) 최솟값을 부여합니다.

기획 지시사항

기획서 상 작성 방법 : 숫자만 기술

Type	`number`
Default	-

customWidth

Added in 1.4

직접 지정한 TextField의의 사이즈를 결정합니다. (단위도 함께 적어주어야 합니다.)

*반드시 디자인 검수후에 사용가능합니다.

기획 지시사항

기획서 상 작성 방법 : 텍스트만 기술

Type	`string`
Default	-

autoComplete

Added in 1.4

자동완성 기능을 어떻게 사용할지 결정합니다. (input이나 textarea의 기본 autoComplete속성중 하나를 사용합니다.)

기획 지시사항

기획서 상 작성 방법 : 텍스트만 기술

Type	`string`
Default	`'on'`

onBlur

Added in 1.2

포커스를 잃는 시점에 이벤트를 부여합니다.

기획 지시사항

기획서 상 작성 방법 : 기획자가 직접 prop을 기술하지 않음

Type	`(e: React.FocusEvent<HTMLInputElement> \| React.FocusEvent<HTMLTextAreaElement>) => void`
Default	-

onChange

Added in 1.2

데이터가 변경되는 시점에 이벤트를 부여합니다.

기획 지시사항

기획서 상 작성 방법 : 기획자가 직접 prop을 기술하지 않음

Type	`(e: React.ChangeEvent<HTMLInputElement> \| React.ChangeEvent<HTMLTextAreaElement>) => void`
Default	-

onClickIBtn1

Added in 1.2

우측에서 1번째 아이콘이 클릭 된 시점에 이벤트를 부여합니다.

기획 지시사항

기획서 상 작성 방법 : 기획자가 직접 prop을 기술하지 않음

Type	`() => void`
Default	-

onClickIBtn2

Added in 1.2

우측에서 1번째 아이콘이 클릭 된 시점에 이벤트를 부여합니다.

기획 지시사항

기획서 상 작성 방법 : 기획자가 직접 prop을 기술하지 않음

Type	`() => void`
Default	-

onFocus

Added in 1.2

포커스를 받은 시점에 이벤트를 부여합니다.

기획 지시사항

기획서 상 작성 방법 : 기획자가 직접 prop을 기술하지 않음

Type	`(e: React.FocusEvent<HTMLInputElement> \| React.FocusEvent<HTMLTextAreaElement>) => void`
Default	-

onKeyUp

Added in 1.2

키보드를 눌렀다가 떼는 시점에 이벤트를 부여합니다.

기획 지시사항

기획서 상 작성 방법 : 기획자가 직접 prop을 기술하지 않음

Type	`(e: React.KeyboardEvent<HTMLInputElement> \| React.KeyboardEvent<HTMLTextAreaElement>) => void`
Default	-

onTarget

Added in 1.2

타겟이 된 시점에 이벤트를 부여합니다.

기획 지시사항

기획서 상 작성 방법 : 기획자가 직접 prop을 기술하지 않음

Type	`() => void`
Default	-

문서 작성 정보

소유자 / 관리자

김혜진, 박윤규

변경 이력

2022/10/04 : transparent colorKey 업데이트 (“colorTheme” 추가) - 김혜원
2022/10/04 : transparent colorKey 업데이트 - 김혜원
2022/09/28 : colorTheme : transparent 추가 - 김혜원
2022/08/24 : autoComplete prop 추가 - 안은수
2022/07/01 : customWidth prop 추가 - 안은수
2022/05/31 : spec 수정(color, radius) - 김혜진
2022/04/29 : enterSubmitMode prop추가 - 안은수
2022/04/04 : Property 기술방법 변경, 코드에만 있던 prop추가 - 안은수
2022/02/25 : 개발 코드 배포여부 추가 - 안은수
2022/01/24 : 공백 허용 관련 prop 추가(preventBlankMode), 유효성 검증 관련 prop 변경 (errText → validation), 유효성 검증 시점 prop 추가 - 김혜진
2021/12/30 : 에러텍스트 사이즈 spec에 추가 / multi, auto일 때 기본 값 추가 - 김혜진
2021/12/22 : colorTheme prop 추가, 자세한 컬러값 spec에 기술 / text에 대한 spec 수정 / multi, auto일 때 높이값에 대한 prop 추가 - 김혜진
2021/11/17 : style을 styleTheme로 수정 - 김혜진
2021/11/16 : icon의 fillType에 대한 내용 기술, spec 내 지정된 icon fillType에 대한 설명 기술, prop 내 btn을 iBtn으로 수정, BtnLink에 대한 값 삭제 - 김혜진
2021/11/11 : 개행에 따른 행간 설명 문구 추가, 아이콘 컬러값 변경 - 김혜진
2021/11/09 : MobileWeb 통합, 사이즈 value 추가 (medium) - 김혜진
2021/11/01 : prop 추가(defaultText) - 김혜진
2021/10/26 : 텍스트 부분 TextLabel 값으로 수정, 기본 width 값 spec 추가 - 김혜진
2021/09/29 : Spec 내용 추가 - 김혜진
2021/09/16 : Principle 내용 추가 - 김혜진
2021/09/10-11 : Property 및 Value 업데이트 - 박윤규
2021/09/08 : Principle 내용 추가 - 김혜진
2021/09/08 : Property 및 Constant, Definition 초안 작성 - 박윤규