Search field

사용자가 키워드나 문장을 입력하여 데이터, 콘텐츠, 또는 기능을 검색할 수 있도록 도와주는 요소를 제공합니다. 자동완성, 추천 검색어, 최근 검색어 등의 기능을 함께 제공할 수 있습니다.

Design

Web

Android

WantedSearch

검색 입력 필드 컴포넌트입니다. String 타입의 텍스트를 받아 검색 기능을 제공하는 입력 필드를 표시합니다. 검색 아이콘과 삭제 버튼이 자동으로 표시되며, 포커스 상태에 따라 UI가 변경됩니다.

var searchText by remember { mutableStateOf("") }

WantedSearchField(
    text = searchText,
    placeholder = "검색어를 입력해주세요",
    onValueChange = { searchText = it }
)

Parameters

이름	타입	설명
`text`	String	입력 필드에 표시할 텍스트입니다.
`modifier`	Modifier	컴포넌트에 적용할 Modifier입니다.
`placeholder`	String	입력 필드가 비어있을 때 표시할 힌트 텍스트입니다.
`enabled`	Boolean	입력 필드의 활성화 여부입니다. false인 경우 사용자 입력이 불가능합니다.
`size`	Size	입력 필드의 크기입니다. Size.Medium() 또는 Size.Small()을 사용할 수 있습니다.
`maxWordCount`	Int	입력 가능한 최대 글자 수입니다.
`enabledOverflowText`	Boolean	최대 글자 수를 초과하는 입력을 허용할지 여부입니다.
`interactionSource`	MutableInteractionSource	사용자 상호작용 상태를 추적하는 소스입니다.
`keyboardOptions`	KeyboardOptions	키보드 옵션 설정입니다.
`keyboardActions`	KeyboardActions	키보드 액션 설정입니다.
`focused`	State<Boolean>	입력 필드의 포커스 상태입니다.
`textStyle`	TextStyle	입력 텍스트의 스타일입니다.
`cursorBrush`	Brush	커서의 색상을 지정하는 브러시입니다.
`focusRequester`	FocusRequester	포커스 요청을 처리하는 객체입니다.
`onValueChange`	(String) -> Unit	텍스트 값이 변경될 때 호출되는 콜백 함수입니다.

Overload

검색 입력 필드 컴포넌트입니다. TextFieldValue 타입의 값을 받아 검색 기능을 제공하는 입력 필드를 표시합니다. 커서 위치와 선택 영역을 세밀하게 제어해야 하는 경우 이 오버로드를 사용합니다.

var textFieldValue by remember { mutableStateOf(TextFieldValue()) }

WantedSearchField(
    value = textFieldValue,
    placeholder = "검색어를 입력해주세요",
    onValueChange = { textFieldValue = it }
)

Parameters

이름	타입	설명
`value`	TextFieldValue	입력 필드의 값, 커서 위치, 선택 영역을 포함하는 객체입니다.
`modifier`	Modifier	컴포넌트에 적용할 Modifier입니다.
`placeholder`	String	입력 필드가 비어있을 때 표시할 힌트 텍스트입니다.
`enabled`	Boolean	입력 필드의 활성화 여부입니다. false인 경우 사용자 입력이 불가능합니다.
`size`	Size	입력 필드의 크기입니다. Size.Medium() 또는 Size.Small()을 사용할 수 있습니다.
`maxWordCount`	Int	입력 가능한 최대 글자 수입니다.
`enabledOverflowText`	Boolean	최대 글자 수를 초과하는 입력을 허용할지 여부입니다.
`interactionSource`	MutableInteractionSource	사용자 상호작용 상태를 추적하는 소스입니다.
`keyboardOptions`	KeyboardOptions	키보드 옵션 설정입니다.
`keyboardActions`	KeyboardActions	키보드 액션 설정입니다.
`focused`	State<Boolean>	입력 필드의 포커스 상태입니다.
`textStyle`	TextStyle	입력 텍스트의 스타일입니다.
`cursorBrush`	Brush	커서의 색상을 지정하는 브러시입니다.
`focusRequester`	FocusRequester	포커스 요청을 처리하는 객체입니다.
`onValueChange`	(TextFieldValue) -> Unit	텍스트 값이 변경될 때 호출되는 콜백 함수입니다.

Advanced

WantedSearchFieldDefaults

WantedSearchField 컴포넌트에서 사용하는 상수들을 정의하는 객체입니다.

Sealed Class

Size

검색 입력 필드의 크기를 정의하는 sealed class입니다. Small, Medium, Custom 세 가지 타입이 존재합니다.

값	설명
`Small`	작은 크기의 검색 입력 필드입니다.
`Medium`	중간 크기의 검색 입력 필드입니다. (기본값)
`Custom`	사용자 정의 크기의 검색 입력 필드입니다.

Properties

이름	타입	설명
`padding`	Dp	입력 필드 내부의 패딩 값입니다.
`minHeight`	Dp	입력 필드의 최소 높이입니다.