텍스트 필드는 가장 기본적인 사용자 입력 컨트롤이다. 사용자의 이름, 이메일주소, 전화번호, 비밀번호와 같은 일반적인 정보부터 상품 금액, 계좌번호, 가격 정보 등 상세한 정보 수집이 필요한 상황에서 범주화 할 수 없는 정보 입력을 요청해야 할 경우 주로 사용된다.
...
UI 유형
텍스트 필드 유형은 2가지로 4가지로 구분한다.
No | Basic Text Field | Description | ||
|---|---|---|---|---|
1 | Default Text Field |   일반적인 텍스트 필드 | ||
2 | Text Field with Tooltip |   툴팁을 함께 사용하는 텍스트 필드 | ||
3 |  텍스트만 |  텍스트만 https://ant.design/components/input/#components-input-demo-presuffix |  Text Field with Addon |  입력 받아야하는 문구 중 고정 내용을 애드온으로 표시 |
4 | Text Field with fixText |  고정 입력 문구 또는 아이콘을 prefix, suffix로 표시 |
| Status | ||||
|---|---|---|---|---|
|
...
Text Field with Addon : 추후 Addon 셀렉트 기능 필요 (현재는 텍스트만 입력 가능)
| Status | ||||
|---|---|---|---|---|
|
| Status | ||||
|---|---|---|---|---|
|
...
텍스트 필드의 필수 입력 여부 설정은 Platform Console에 있는 스키마 메뉴에서 진행 한다. 필수 입력으로 설정된 텍스트 필드는 사용자 입력 시 설정 조건에 따라 경고성 Helper Text가 자동 출력 된다.
...
...
상태 정보
텍스트 필드의 상태는 아래와 같이 8가지로 표현된다4가지로 표현되며, 모든 텍스트 필드 컴포넌트에 공통으로 적용되어 있다.
Normal | Hover |
|---|---|
 |  |
Active | Disabled |
 |  |
| Status | ||||
|---|---|---|---|---|
|
Typing | Filled |
|---|---|
 |  |
Success | Error |
  |   |
...
UI 구조
텍스트 필드의 기본 구조는 다음과 같다.
...
Label : 입력 필드에 입력 할 정보가 무엇인지 제목 표시
Input Field : 라벨 하단에 있는 텍스트 입력 영역으로, 입력 정보가 실시간으로 출력되는 영역
Tooltip : 물음표 아이콘이 라벨 옆에 출력되며, 마우스 오버 시 출력되는 안내 문구
Placeholder : 입력 받을 정보에 대한 부가적인 요청 문구로 정보가 입력되면 사라짐
Helper Text : 필드 하단에 고정되어 노출되는 도움말 문구 (
Comment,Status colour Red title asis
Helper Text )Status colour Red title tobe Cursor : 사용자에 의해 입력된 텍스트의 필드 내의 현재 입력 위치 표시
Input Text : 사용자가 입력 필드에 작성한 텍스트
Clear Button : 필드에 입력한 정보를 한번에 삭제Status colour Yellow title new
...
BackOffice Builder의 Text Field > Setting > [Option] 설정을 통해 입력 텍스트 필드 내용을 변경한다.
텍스트만
...
