Hi here! I would like to know if it is possible to extends the clickable zone of a `Checkbox` or it ...

# compose

[gpaligot]

Hi here! I would like to know if it is possible to extends the clickable zone of a Checkbox or it is impossible? I tried to add a padding in the modifier of the composable but it doesn't work.

[Casey Brooks]

Just lift the Modifier.clickable { } to a parent layout, rather than using the Checkbox's own onCheckedChange callback.

[Chris Fillmore]

You can surround it with something else clickable

var checked by remember { mutableStateOf(false) }
Box(
  modifier = Modifier.clickable {
    checked = !checked
  }
) {
  CheckBox(checked = checked, ...) ...
}

[Chris Fillmore]

Yeah what @Casey Brooks said 👍

[gpaligot]

That's the recommended way to do that?

[Casey Brooks]

Yes, this actually is the intended way to do things like this, and it should not be considered a "hack". It's actually an intentional part of the beauty of Compose.

The whole Material UI goes with this assumption, that the components in there have intentionally limited configurability, but are ultimately just small wrappers around lower-level, more generalized Compose APIs. If the high-level component doesn't do everything you need, you can drop to a "lower level" (such as a manual .clickable { } modifier rather than the opinionated onCheckedChanged) and build out the exact functionality you need without too much fuss.

The docs article on "Architectural Layering" goes into this a bit more in-depth https://developer.android.com/jetpack/compose/layering

[Casey Brooks]

And now that I actually look into the source for Checkbox, it's might better to use Modifier.toggleable or Modifier.triStateToggleable instead of .clickable for better accessibility 😉

[gpaligot]

Great, thanks for all these explanations! Understand much more it is the good way. 🙂