Text field

일정 높이의 필드 안에 한 줄 이하의 값을 입력할 수 있는 컴포넌트로 Heading, Placeholder, Description 등의 요소를 활용하여 사용자가 입력할 내용의 형식을 보다 명확하게 안내합니다.

Design

Web

iOS

Android

WantedTextField

텍스트 입력을 위한 커스텀 Text field 컴포넌트입니다. TextFieldValue가 아닌 문자열 기반으로 값을 주고받는 방식입니다. 에러, 완료 상태, 우측 버튼, 아이콘, 설명, 포커스 등을 커스터마이징할 수 있습니다.

WantedTextField(
    text = "입력값",
    placeholder = "텍스트를 입력하세요",
    onValueChange = { newValue -> ... }
)

Parameters

이름	타입	설명
`text`	String	현재 입력된 텍스트입니다.
`modifier`	Modifier	레이아웃 및 스타일을 설정합니다.
`placeholder`	String	텍스트 필드에 힌트로 표시될 문자열입니다.
`title`	String	상단 제목 텍스트입니다.
`description`	String?	하단에 표시할 설명 또는 상태 메시지입니다.
`rightButton`	String?	우측 버튼에 표시될 텍스트입니다.
`rightButtonVariant`	RightVariant	우측 버튼 스타일을 지정합니다.
`status`	Status	텍스트 필드의 상태 (Normal, Positive, Negative)입니다.
`enabled`	Boolean	입력 가능 여부입니다.
`rightButtonEnabled`	Boolean	우측 버튼 활성화 여부입니다.
`maxLines`	Int	텍스트 필드의 최대 줄 수입니다.
`minLines`	Int	텍스트 필드의 최소 줄 수입니다.
`maxWordCount`	Int	허용되는 최대 글자 수입니다.
`enabledOverflowText`	Boolean	글자 수 초과 허용 여부입니다.
`requiredBadge`	Boolean	제목 옆에 필수 뱃지 표시 여부입니다.
`interactionSource`	MutableInteractionSource	포커스 및 인터랙션 상태를 추적합니다.
`keyboardOptions`	KeyboardOptions	키보드 동작 옵션입니다.
`keyboardActions`	KeyboardActions	키보드 액션에 대한 핸들링입니다.
`background`	Color	텍스트 필드 배경 색상입니다.
`visualTransformation`	VisualTransformation	텍스트 표시 방식을 변환합니다 (예: 비밀번호 마스킹).
`leadingIcon`	(() -> Unit)?	좌측 아이콘 슬롯입니다.
`trailingIcon`	(() -> Unit)?	우측 아이콘 슬롯입니다.
`trailingContent`	((Dp) -> Unit)?	우측 버튼 외 영역에 들어갈 커스텀 콘텐츠입니다.
`onClickRightButton`	() -> Unit	우측 버튼 클릭 시 콜백입니다.
`onValueChange`	(String) -> Unit	텍스트 변경 시 콜백입니다.

Overload

Text field 컴포넌트에서 사용되는 설정 값을 정의하는 객체입니다. 커서 위치 및 선택 영역 처리를 위해 TextFieldValue 객체를 사용합니다.

val state = remember { mutableStateOf(TextFieldValue("")) }
WantedTextField(value = state.value, onValueChange = { state.value = it })

Parameters

이름	타입	설명
`value`	TextFieldValue	입력된 텍스트 및 커서 상태를 포함한 값입니다.
`onValueChange`	(TextFieldValue) -> Unit	값 변경 시 호출되는 콜백입니다.
`modifier`	Modifier	외형 및 레이아웃 설정입니다.
`enabled`	Boolean	입력 가능 여부입니다.
`title`	String	상단 제목 텍스트입니다.
`requiredBadge`	Boolean	필수 뱃지 표시 여부입니다.
`placeholder`	String	플레이스홀더 문자열입니다.
`description`	String?	하단 상태 또는 설명 메시지입니다.
`leadingIcon`	(() -> Unit)?	좌측 아이콘 슬롯입니다.
`trailingIcon`	(() -> Unit)?	우측 아이콘 슬롯입니다.
`trailingContent`	((Dp) -> Unit)?	우측 영역 콘텐츠 슬롯입니다.
`rightButton`	String?	우측 버튼 텍스트입니다.
`onClickRightButton`	() -> Unit	우측 버튼 클릭 콜백입니다.
`rightButtonEnabled`	Boolean	우측 버튼 활성화 여부입니다.
`rightButtonVariant`	RightVariant	우측 버튼 스타일입니다.
`status`	Status	입력 상태입니다.
`maxWordCount`	Int	최대 글자 수입니다.
`enabledOverflowText`	Boolean	글자 수 초과 허용 여부입니다.
`minLines`	Int	최소 줄 수입니다.
`maxLines`	Int	최대 줄 수입니다.
`interactionSource`	MutableInteractionSource	포커스 추적용입니다.
`keyboardOptions`	KeyboardOptions	키보드 동작 설정입니다.
`keyboardActions`	KeyboardActions	키보드 액션 처리입니다.
`background`	Color	배경 색상입니다.
`visualTransformation`	VisualTransformation	텍스트 표시 방식을 변환합니다 (예: 비밀번호 마스킹).

Advanced

WantedTextFieldDefaults

TextField 컴포넌트에서 사용되는 설정 값을 정의하는 객체입니다. 선택 렌더링 방식과 선택 UI 스타일을 제어할 수 있는 enum 클래스를 포함합니다.

Enum

Status

값	설명
`Normal`	일반 상태입니다.
`Positive`	긍정 상태입니다.
`Negative`	부정 상태입니다.

RightVariant

값	설명
`Normal`	일반 스타일입니다.
`Assistive`	보조 스타일입니다.