Text Field
사용자가 인풋을 입력할 수 있도록 필드를 제공합니다. 예상되는 응답이 한 줄 이내로 짧을 경우에 적합합니다.
Live Demo
Size
State
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| placeholder | string | - | 플레이스홀더 텍스트를 지정합니다. |
| size | "small" | "medium" | "medium" | Text Field의 크기를 선택합니다. |
| error | boolean | false | 에러 상태 여부를 지정합니다. |
| helperText | string | - | 도움말 텍스트를 지정합니다. |
| validationMessage | string | - | 유효성 검사 메시지를 지정합니다. |
| counter | boolean | false | 글자 수 카운터 표시 여부를 지정합니다. |
| component | ElementType | - | 렌더링할 HTML 요소를 지정합니다. |
| validationIcon | ReactNode | - | 유효성 검사 아이콘을 지정합니다. |
| locale | string | - | 로케일을 지정합니다. |
| inputProps | object | - | 입력 요소에 전달할 추가 속성을 지정합니다. |
| disabled | boolean | false | 비활성화 여부를 지정합니다. |
Anatomy
- Label (optional)
- Container
- Text
- Validation message (optional)
- Letter count (optional)
- Helper text (optional)