minimumInteractiveComponentSize

MinimumInteractiveComponentSizeCheckboxRowSample

@Preview
@Composable
fun MinimumInteractiveComponentSizeCheckboxRowSample() {
    var checked by remember { mutableStateOf(false) }
    // The entire row accepts interactions to toggle the checkbox,
    // so we apply `minimumInteractiveComponentSize`
    Row(
        verticalAlignment = Alignment.CenterVertically,
        modifier =
            Modifier.toggleable(
                    value = checked,
                    onValueChange = { checked = it },
                    role = Role.Checkbox,
                )
                .minimumInteractiveComponentSize(),
    ) {
        // Cannot rely on Checkbox for touch target expansion because it only enforces
        // `minimumInteractiveComponentSize` if onCheckedChange is non-null
        Checkbox(checked = checked, onCheckedChange = null)
        Spacer(Modifier.width(8.dp))
        Text("Label for checkbox")
    }
}

MinimumInteractiveComponentSizeSample

@Preview
@Composable
fun MinimumInteractiveComponentSizeSample() {
    @Composable
    fun Widget(color: Color, modifier: Modifier = Modifier) {
        // Default size is 24.dp, which is smaller than the recommended touch target
        Box(modifier.size(24.dp).background(color))
    }
    Column(Modifier.border(1.dp, Color.Black)) {
        // Not interactable, no need for touch target enforcement
        Widget(Color.Red)
        Widget(
            color = Color.Green,
            modifier =
                Modifier.clickable { /* do something */ }
                    // Component is now interactable, so it should enforce a sufficient touch target
                    .minimumInteractiveComponentSize(),
        )
        Widget(
            color = Color.Blue,
            modifier =
                Modifier.clickable { /* do something */ }
                    // Component is now interactable, so it should enforce a sufficient touch target
                    .minimumInteractiveComponentSize()
                    // Any size modifiers should come after `minimumInteractiveComponentSize`
                    // so as not to interfere with layout expansion
                    .size(36.dp),
        )
    }
}