Text Field

텍스트를 한 줄에 입력할 수 있는 폼 요소입니다.

구조도

Label과 Placeholder는 Text Field가 사용자에게 요구하는 항목에 대한 설명을 제공합니다. 명시적 정보 전달을 위해 Label과 Placeholder를 표시하는 것을 권장합니다.

Text Field는 Outlined, Underlined 2종류의 Variant를 가질 수 있습니다. Outlined가 보편적으로 사용되며, 주변 요소와의 조화를 고려해 컨테이너 스타일을 다르게 사용할 수 있습니다.

Text Field는 small, medium, large 3개의 사이즈를 가질 수 있습니다. Medium이 기본값으로 가장 보편적으로 사용되며, 다른 크기는 주변 요소와의 균형 및 위계에 따라 제한적으로 사용합니다.

Description을 통해 사용자가 입력해야 하는 내용에 대한 추가 컨텍스트나 도움말을 제공할 수 있습니다. 특정 요구사항이나 힌트 텍스트를 전달합니다.

Text Field의 필수 요구 사항이 충족되지 않았거나, 잘못된 정보를 기입했을 경우 사용자에게 에러 메세지를 전달합니다.

Prefix와 Suffix에는 텍스트와 버튼을 사용할 수 있습니다. 입력하는 내용과 컨텍스트에 따라 올바른 맥락으로 사용해야 합니다.

Required or Optional indicator를 통해 사용자에게 입력값이 필수 또는 선택 사항인지 표시할 수 있습니다. 선택 사항인 경우 '선택' 이라는 힌트 텍스트를 제공하거나, 아예 표시하지 않습니다.

Text Field에 사용자가 입력할 수 있는 최대 글자 수를 표시합니다.

Disabled 상태는 Text Field가 존재하지만 지금은 사용할 수 없는 상태를 나타냅니다. 이 옵션은 레이아웃 일관성을 유지하고 이후 상호작용이 가능할 수도 있음을 사용자에게 알려줍니다.

Read only 상태는 읽기 전용 옵션입니다. 복사나 드래그는 가능하지만 상호 작용이나 텍스트 입력, 변경은 불가능한 상태입니다.

속성	값	기본값	설명
variant	outlined, underlined	outlined
label	text
placeholder	text
prefix	text, button
suffix	text, button
max length	number
description	text
error message	text
required indicator	text
optional indicator	text
is disabled	true, false	false	true일 경우, Text field가 유저와 상호작용하지 않음
is readonly	true, false	false	true일 경우, value를 변경할 수 없음
is required	true, false	false	true일 경우, value가 필수임을 나타냄
is invalid	true, false	false	true일 경우, value가 유효하지 않은 값임을 나타냄