Web - TextField

정의

TextField

최적화 대상

Desktop

Mobile

기획 배포

완료

디자인 가이드 배포

완료

개발 코드 배포

완료

Height

48px

40px

32px

Width

432px

188px

188px

radius

14px

12px

10px

text

[입력란]

• font size : form2

• font weight : regular

textLineType : single일 경우, 행간 singleLine 적용

그 외 form2에 적용한 행간 적용

[prefixText]

• styleTheme : caption2Bold

• singleLineMode : use

• textAlign : right

[suffixText]

• styleTheme : caption2Bold

• singleLineMode : use

• 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

문구 전체 삭제 버튼

• 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

prefix, suffix text

• prefixText

  • styleTheme : caption2Bold

  • singleLineMode : use

  • textAlign : right

• suffixText

  • styleTheme : caption2Bold

  • singleLineMode : use

prefixText

• styleTheme : caption2Bold

• singleLineMode : use

• textAlign : right

• suffixText

  • styleTheme : caption2Bold

  • singleLineMode : use

prefixText

• styleTheme : caption2Bold

• singleLineMode : use

• textAlign : right

• suffixText

  • styleTheme : caption2Bold

  • singleLineMode : use

stepper

Web - Icon 참고

• size : 16

• fillType : fill

• iconName

  • ic_arrow_up_stepper

  • ic_arrow_down_stepper

Web - Icon 참고

• size : 16

• fillType : fill

• iconName

  • ic_arrow_up_stepper

  • ic_arrow_down_stepper

Web - Icon 참고

• size : 12

• fillType : fill

• iconName

  • ic_arrow_up_stepper

  • ic_arrow_down_stepper

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

hover

-

-

-

ui_cpnt_textfield_base_hover

pressed

-

-

-

ui_cpnt_textfield_base_pressed

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

hover

-

-

-

ui_cpnt_textfield_base_hover_darktheme

pressed

-

-

-

ui_cpnt_textfield_base_pressed_darktheme

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

hover

-

-

-

ui_cpnt_textfield_base_hover_transparent

pressed

-

-

-

ui_cpnt_textfield_base_pressed_transparent

enum

'none'

'none'

사용하지 않음

'use'

사용함

number | string | object | Array<string | object> | undefined | null

-

number | string | object | Array<string | object> | undefined | null

-

enum

'left'

'left'

'center'

'right'

number | string | object | Array<string | object> | undefined | null

-

number | string | object | Array<string | object> | undefined | null

-

number | string | object | Array<string | object> | undefined | null

-

{ [key: string]: any }

-

enum

'onBlur'

'onBlur'

focus-out 시 반영

'onChange'

입력때마다 바로 반영

enum

'none'

'none'

공백을 막지 않습니다.

'trim'

앞 뒤 공백을 막으며, submit 버튼을 누르는 시점에 적용됩니다.

'all'

모든 공백을 막으며, onChange 시점에 적용됩니다.

enum

'none'

'none'

엔터키를 통해 제출할 수 없습니다.

'use'

엔터키를 통해 제출할 수 있습니다.

string

'text'

enum

'large'

'small'

'medium'

'large'

'rlarge'

화면 영역에 꽉 차게

enum

'single'

'single'

1줄 입력이 고려된 화면

'multi'

여러줄 입력이 고려된 화면

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

'auto'

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

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

number

8

number

8

number

-

enum

'normal'

'normal'

기본 상태 입니다.

'read_only'

읽기 전용입니다. (입력창 수정 불가)

'disabled'

비활성화 상태입니다.

enum

-

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

enum

'line'

'line'

line 형태의 아이콘을 사용합니다.

'fill'

fill 형태의 아이콘을 사용합니다.

enum

'line'

'line'

line 형태의 아이콘을 사용합니다.

'fill'

fill 형태의 아이콘을 사용합니다.

enum

'ui_cpnt_button_icon_default'

정해져 있는 컬러 값 중 하나를 부여합니다. (ui_xxx의 형식입니다.)

enum

-

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

enum

'line'

'line'

line 형태의 아이콘을 사용합니다.

'fill'

fill 형태의 아이콘을 사용합니다.

enum

'ui_cpnt_button_icon_default'

정해져 있는 컬러 값 중 하나를 부여합니다. (ui_xxx의 형식입니다.)

enum

'none'

'none'

'dark'

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

(spec 기술 참고)

'transparent'

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

(spec 기술 참고)

Added in 1.4

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

-

number

-

number

-

number

-

string

-

string

'on'

enum

'none'

'none'

'use'

number

-

enum

'regular'

'bold'

텍스트 사용 규칙의 ‘bold’를 따릅니다.

'regular'

텍스트 사용 규칙의 ‘regular’를 따릅니다.

enum

'use'

'none'

'use'

(e: React.FocusEvent<HTMLInputElement> | React.FocusEvent<HTMLTextAreaElement>) => void

-

(e: React.ChangeEvent<HTMLInputElement> | React.ChangeEvent<HTMLTextAreaElement>) => void

-

() => void

-

() => void

-

(e: React.FocusEvent<HTMLInputElement> | React.FocusEvent<HTMLTextAreaElement>) => void

-

(e: React.KeyboardEvent<HTMLInputElement> | React.KeyboardEvent<HTMLTextAreaElement>) => void

-

(e: React.KeyboardEvent<HTMLInputElement> | React.KeyboardEvent<HTMLTextAreaElement>) => void

-

() => void

-

김혜진, 박윤규

• 2024/01/10 : overrideIBtn1IconColorKey, overrideIBtn2IconColorKey prop 추가 - 김혜진

• 2023/08/17 : stepper에 대한 스펙, 조합되었을 때 간격 가이드 업데이트 - 김혜진

• 2023/07/18 : deleteBtnMode prop 추가 - 김혜진

• 2023/07/13 : fontWeight prop 추가 - 김혜진

• 2023/06/08 : 옵션 추가에 따른 가이드 문서 업데이트(prefix, suffix, stepper) - 김혜진

• 2023/03/10 : prefixText, suffixText prop 추가 - 안은수

• 2023/02/28 : textAlign prop 추가 - 안은수

• 2023/02/17 : onKeyDown prop 추가 - 안은수

• 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 초안 작성 - 박윤규