Chip Composable

@Composable
fun ChipGroupCompose() {

    data class GenderList( val title: String, val icon: Int )

    val genders = listOf(
        GenderList("Male", R.drawable.ic_gender_male),
        GenderList("Female", R.drawable.ic_gender_female),
        GenderList("Other", R.drawable.ic_gender_other)
    )

    var selected by remember { mutableStateOf("") }

    Row(
        modifier = Modifier
            .padding(start = 3.dp, top = 50.dp)
            .fillMaxWidth()
    ) {
        genders.forEach { it ->
            Chip(
                title = it.title,
                icon = it.icon,
                selected = selected,
                onSelected = {
                    selected = it
                }
            )
        }
    }

}

@Composable
fun Chip(
    title: String,
    icon: Int,
    selected: String,
    onSelected: (String) -> Unit
) {

    val isSelected = selected == title

    val background = if (isSelected) Color.Blue else Color.LightGray
    val contentColor = if (isSelected) Color.White else Color.Black

    Box(
        modifier = Modifier
            .padding(end = 10.dp)
            .height(35.dp)
            .clip(RoundedCornerShape(4.dp))
            .background(background)
            .clickable(
                onClick = {
                    onSelected(title)
                }
            )
    ) {
        Row(
            modifier = Modifier.padding(start = 3.dp, end = 10.dp, top = 5.dp),
            verticalAlignment = Alignment.CenterVertically,
            horizontalArrangement = Arrangement.spacedBy(4.dp)
        ) {

            Image(painter = painterResource(icon), contentDescription = "icon")

            Text(text = title, color = contentColor, fontSize = 16.sp)

        }
    }

}