How can I change the background of Radio Button ?

What about this?

Row(modifier = Modifier.fillMaxWidth()) {
    (1 until 5).forEach { index ->
        val isSelected = toggleIndex == index
        Text(
            text = index.toString(),
            style = TextStyle(
                color = if (isSelected) Color.White else Color.Black,
                fontSize = 20.sp
            ),
            modifier = Modifier
                .border(1.dp, color = Color.Black, CircleShape)
                .background(
                    color = if (isSelected) Color.Black else Color.White,
                    shape = CircleShape
                )
                .clickable(
                    indication = RippleIndication(bounded = true, radius = 24.dp)
                ) {
                    toggleIndex = index
                }
                .size(48.dp)
        )
        Spacer(modifier = Modifier.width(2.dp))
    }
}
}

You can / should use

Modifier.selectable

instead of

Modifier.clickable

here to add proper semantics / accessibility for a selectable item, other than that looks good.

great @Louis Pullen-Freilich [G]! thanks for the feedback. could you tell me more how to add this semantics / accessibility?

Modifier.selectable

will automatically do it for you, so just replace

clickable

with it and it is all done 🙂

thanks 😉

https://cs.android.com/androidx/platform/frameworks/support/+/androidx-master-dev:compose/material/material/src/commonMain/kotlin/androidx/compose/material/RadioButton.kt;l=88 You can take a look at how

RadioButton

is built

Thanks! 🙂 I took a look into this to use the

indication

property 😊

@nglauber @Louis Pullen-Freilich [G], Thanks for your help, I could achieve this 🙂 here is the code I made

var toggleIndex = remember { mutableStateOf(0) }

Row(modifier = Modifier.fillMaxWidth(), verticalAlignment = Alignment.CenterVertically) {
    (1..5).forEach { index ->
        val isSelected = toggleIndex.value == index
        Text(
            text = index.toString(),
            style = TextStyle(
                color = if (isSelected) Color.White else Color.Black,
                fontSize = 20.sp,
                textAlign = TextAlign.Center
            ),
            modifier = Modifier
                .border(1.dp, color = Color.White, CircleShape)
                .background(
                    color = if (isSelected) Color.Black else Color.White,
                    shape = CircleShape
                )
                .selectable(
                    enabled = true,
                    selected = true,
                    onClick = { toggleIndex.value = index },
                    indication = RippleIndication(bounded = true, radius = 24.dp)
                ).size(48.dp)
        )
        Spacer(modifier = Modifier.width(2.dp))
    }
}

I have to align the text to be center to its background