Select

사용자가 미리 정의된 옵션 목록 중 하나 혹은 하나 이상의 항목을 선택할 수 있는 입력 요소입니다.

Design

Web

iOS

Android

WantedSelect

단일 항목을 선택할 수 있는 Select 컴포넌트입니다. 선택 가능한 항목을 Bottom sheet로 제공하며, 선택 시 콜백으로 결과를 반환합니다.

var selectedValue by remember { mutableStateOf("") }

WantedSelect(
    value = selectedValue,
    title = "직무 선택",
    placeholder = "직무를 선택해주세요",
    selectValueList = listOf("백엔드", "프론트엔드", "디자이너"),
    onSelect = { selectedValue = it }
)

Parameters

이름	타입	설명
`value`	String	선택된 현재 값입니다.
`modifier`	Modifier	컴포넌트에 적용할 Modifier입니다.
`title`	String?	상단에 표시할 제목입니다.
`description`	String?	셀렉트 아래에 표시할 부가 설명입니다.
`placeHolder`	String	선택 전 표시될 플레이스홀더입니다.
`confirmText`	String	확인 버튼 텍스트입니다.
`isRequiredBadge`	Boolean	제목 옆에 필수 표시 뱃지를 보여줄지 여부입니다.
`negative`	Boolean	오류 상태 여부입니다.
`focused`	Boolean	포커스 시 테두리 강조 여부입니다.
`enabled`	Boolean	활성화 여부입니다.
`selectValueList`	List<String>	선택 가능한 항목 리스트입니다.
`selectedValue`	String?	초기 선택된 항목입니다.
`bottomSheetType`	ModalType	BottomSheet 형식입니다.
`selectType`	SelectType	선택 UI 타입입니다.
`background`	Color	배경 색상입니다.
`onClick`	() -> Unit	클릭 시 호출되는 콜백입니다.
`onSelect`	(String) -> Unit	선택 완료 시 호출되는 콜백입니다.
`leadingIcon`	(@Composable () -> Unit)?	왼쪽 아이콘 슬롯입니다.

Overload

WantedSelectData를 사용하는 단일 항목 선택 컴포넌트입니다. 선택된 항목을 화면에 표시하고, 클릭 시 Bottom sheet를 통해 항목을 선택할 수 있습니다.

var selectedData by remember { mutableStateOf<WantedSelectData?>(null) }

WantedSelect(
    title = "직무 선택",
    selectData = selectedData,
    selectDataList = listOf(
        WantedSelectData(id = "1", text = "백엔드"),
        WantedSelectData(id = "2", text = "프론트엔드")
    ),
    onSelectData = { selectedData = it }
)

Parameters

이름	타입	설명
`selectData`	WantedSelectData?	화면에 표시할 현재 선택된 값입니다.
`modifier`	Modifier	컴포넌트에 적용할 Modifier입니다.
`title`	String?	상단에 표시할 제목입니다.
`description`	String?	셀렉트 아래에 표시할 설명 텍스트입니다.
`confirmText`	String	확인 버튼 텍스트입니다. 비어 있으면 즉시 선택이 적용됩니다.
`placeHolder`	String	선택 전 표시되는 플레이스홀더 텍스트입니다.
`isRequiredBadge`	Boolean	제목 우측에 필수 뱃지를 표시할지 여부입니다.
`negative`	Boolean	오류 상태 여부입니다. true일 경우 강조 색상 및 아이콘이 표시됩니다.
`focused`	Boolean	포커스 상태 여부입니다. true일 경우 테두리가 강조됩니다.
`enabled`	Boolean	컴포넌트 활성화 여부입니다.
`selectDataList`	List<WantedSelectData>	선택 가능한 항목 리스트입니다.
`selectedData`	WantedSelectData?	초기 선택된 항목입니다.
`bottomSheetType`	ModalType	BottomSheet 형식입니다.
`selectType`	SelectType	항목 선택 방식입니다.
`background`	Color	셀렉트 박스의 배경 색상입니다.
`onClick`	() -> Unit	셀렉트 박스 클릭 시 호출되는 콜백입니다.
`onSelectData`	(WantedSelectData) -> Unit	항목 선택 완료 후 호출되는 콜백입니다.
`leadingIcon`	(@Composable () -> Unit)?	좌측에 표시할 커스텀 아이콘 슬롯입니다.

여러 항목을 선택할 수 있는 Multi select 컴포넌트입니다. 선택된 항목들을 Chip 또는 텍스트 형태로 표시하며, 클릭 시 Bottom sheet 형태의 다중 선택 Dialog를 표시합니다.

var selectedList by remember { mutableStateOf(listOf<WantedSelectData>()) }

WantedSelect(
    title = "관심 분야",
    selectedDataList = selectedList,
    selectDataList = listOf(
        WantedSelectData(id = "1", text = "개발"),
        WantedSelectData(id = "2", text = "디자인")
    ),
    onSelectDataList = { selectedList = it },
    onDeleteData = { item ->
        selectedList = selectedList.filter { it.id != item.id }
    }
)

Parameters

이름	타입	설명
`selectedDataList`	List<WantedSelectData>	현재 선택된 항목 리스트입니다.
`modifier`	Modifier	컴포넌트에 적용할 Modifier입니다.
`title`	String?	상단에 표시할 제목입니다.
`description`	String?	셀렉트 아래에 표시할 설명 텍스트입니다.
`confirmText`	String	확인 버튼 텍스트입니다. 비어 있으면 항목 선택 시 즉시 반영됩니다.
`placeHolder`	String	선택 전 표시될 안내 텍스트입니다.
`isRequiredBadge`	Boolean	제목 오른쪽에 필수 입력 뱃지를 표시할지 여부입니다.
`negativeDataList`	List<WantedSelectData>	오류 표시를 위한 항목 리스트입니다.
`focused`	Boolean	포커스 강조 상태 여부입니다.
`enabled`	Boolean	선택 가능 여부입니다.
`overflow`	Boolean	선택 항목이 넘칠 경우 줄바꿈 처리할지 여부입니다.
`selectDataList`	List<WantedSelectData>	선택 가능한 전체 항목 리스트입니다.
`selectType`	SelectType	선택 UI 타입입니다.
`render`	MultiSelectRender	선택 항목 표시 방식입니다.
`background`	Color	셀렉트 박스의 배경 색상입니다.
`onDeleteData`	(WantedSelectData) -> Unit	선택된 항목을 삭제할 때 호출되는 콜백입니다.
`onClick`	() -> Unit	셀렉트 박스 클릭 시 호출되는 콜백입니다.
`onSelectDataList`	(List<WantedSelectData>) -> Unit	항목 선택 완료 후 호출되는 콜백입니다.
`leadingIcon`	(@Composable () -> Unit)?	셀렉트 박스 왼쪽에 표시할 커스텀 아이콘 슬롯입니다.

Advanced

WantedSelectWithString

문자열 리스트 기반의 Multi select 컴포넌트입니다. 여러 개의 문자열 값을 선택하고, 선택된 항목을 Chip 또는 텍스트 형태로 표시합니다.

var selectedList by remember { mutableStateOf(listOf<String>()) }

WantedSelectWithString(
    title = "기술 스택",
    selectedValueList = selectedList,
    selectValueList = listOf("Kotlin", "Java", "Swift"),
    onSelectList = { selectedList = it },
    onDelete = { item ->
        selectedList = selectedList.filter { it != item }
    }
)

Parameters

이름	타입	설명
`selectedValueList`	List<String>	현재 선택된 문자열 항목 리스트입니다.
`modifier`	Modifier	컴포넌트에 적용할 Modifier입니다.
`title`	String?	상단에 표시할 제목입니다.
`description`	String?	셀렉트 아래 설명 텍스트입니다.
`confirmText`	String	확인 버튼에 표시할 텍스트입니다. 비워두면 즉시 반영됩니다.
`placeHolder`	String	아무 항목도 선택되지 않았을 때 표시되는 안내 텍스트입니다.
`isRequiredBadge`	Boolean	제목 옆 필수 뱃지를 표시할지 여부입니다.
`negativeList`	List<String>	오류로 표시할 항목 리스트입니다.
`focused`	Boolean	포커스 상태 여부입니다.
`enabled`	Boolean	활성화 여부입니다.
`overflow`	Boolean	Chip 렌더링 시 줄바꿈 여부입니다.
`selectValueList`	List<String>	선택 가능한 항목 리스트입니다.
`selectType`	SelectType	선택 방식입니다.
`render`	MultiSelectRender	선택 항목 렌더링 형태입니다.
`background`	Color	컴포넌트 배경 색상입니다.
`leadingIcon`	(@Composable () -> Unit)?	왼쪽에 표시할 선택적 아이콘 슬롯입니다.
`onDelete`	(String) -> Unit	선택된 항목에서 삭제 버튼 클릭 시 호출되는 콜백입니다.
`onClick`	() -> Unit	셀렉트 영역 클릭 시 호출되는 콜백입니다.
`onSelectList`	(List<String>) -> Unit	항목 선택 완료 후 호출되는 콜백입니다.

WantedSelectData

WantedSelect, WantedMultiSelect에서 사용되는 선택 항목 데이터 모델입니다. 선택 가능한 항목을 구성할 때 텍스트, 아이콘 리소스, URL, 부가 데이터 등을 함께 담을 수 있습니다.

val item = WantedSelectData(
    id = "01",
    text = "디자인",
    iconUrl = "https://icon.url",
    iconRes = R.drawable.ic_design,
    tint = R.color.primary_normal,
    any = DesignCategory.UI
)

Properties

이름	타입	설명
`id`	String	항목의 고유 ID입니다.
`text`	String	사용자에게 표시할 텍스트입니다.
`iconUrl`	String	아이콘 이미지 URL입니다.
`any`	Any?	부가 데이터를 담기 위한 확장 필드입니다.
`iconRes`	Int	Drawable 리소스 ID입니다.
`tint`	Int	아이콘에 적용할 색상 리소스 ID입니다.

WantedSelectDefaults

Select 컴포넌트에서 사용되는 설정 값을 정의하는 객체입니다.

Enum

MultiSelectRender

값	설명
`Chip`	선택된 항목을 Chip 형태로 표시
`Text`	선택된 항목을 텍스트 형태로 나열

SelectType

값	설명
`CheckMark`	단일 선택 시 체크마크 방식
`CheckBox`	멀티 선택 시 체크박스 방식
`Radio`	단일 선택 시 라디오 버튼 방식