Is there a way to make a non-interactive `Checkbox...

# compose

[grandstaish]

Is there a way to make a non-interactive Checkbox (but also not appear disabled)?

Context: I have a ListItem with a trailing Checkbox where clicking the list item toggles the checked state. I’m currently sharing the interactionState between the checkbox and list item so that they ripple together. Sharing interactions like this is cool, but I’d prefer having no ripple at all on the checkbox

[Alexjlockwood]

Have you tried passing a null interaction state to the checkbox instead?

[Alexjlockwood]

Also if you want only the list item to be focusable in talkback screen reader you need to pass Modifier.semantics { hidden() } to the checkbox too

[grandstaish]

Yea that was my first idea too, but interactionState is non-nullable

[Alexjlockwood]

Oh right. What happens if you just don't pass an interaction state arg at all?

[Alexjlockwood]

I'm assuming that will prevent the checkbox from rippling when you press the list item but you'll still probably see a ripple when you press on top of the checkbox...

[Alexjlockwood]

This sounds similar to an issue I was having too here. May be worth chiming in I'd you can't figure it out https://issuetracker.google.com/issues/171819073

[len]

You can wrap the default checkbox, make it disabled and use the enabled colors as the disabled ones. I did that for a switch (I'm building a screens preference where clicking the row should toggle the preference) and it works fine.

This is my implementation for a switch, but using a checkbox won't be much different:

@Composable
fun ReadOnlySwitch(checked: Boolean) {
  val colors = SwitchConstants.defaultColors(
    disabledCheckedThumbColor = MaterialTheme.colors.secondaryVariant,
    disabledCheckedTrackColor = MaterialTheme.colors.secondaryVariant,
    disabledUncheckedThumbColor = MaterialTheme.colors.surface,
    disabledUncheckedTrackColor = MaterialTheme.colors.onSurface
  )
  Switch(checked, onCheckedChange = {}, enabled = false, colors = colors)
}

[grandstaish]

Yup if you don’t pass the interaction state arg, it just gets its own separate one, so you only see the ripple on whichever component you touch (never both). I just popped a comment on your issue, thanks for that! I’m hoping they consider changing the API slightly before stable 🤞

Thanks Len!! This solution is exactly what I’m after 🙌

[Alexjlockwood]

Jw, does talkback announce the switch as disabled if you use this approach? 🤔

Would be surprised if this was the intended usage of the enabled arg, but I guess whatever works... 🤷

cc @Louis Pullen-Freilich [G] as we were talking a bit about the checkbox within a list item general approach the other day, and was the one who asked me to file the bug above ^

[Louis Pullen-Freilich [G]]

Yeah this is dangerous - if you make sure to hide the switch from accessibility then it could maybe work, but as is this will appear disabled for accessibility, which is probably not what the intention here is. We probably will need a better solution here and make this easier from the API side, not sure how that would look like yet

[grandstaish]

Yup—definitely not my intention. Thanks for calling that out.

We're about to start learning compose and building a design system on top of it, and I'm beginning to realise that getting the APIs right might be tricky 😅 Very interested to see what changes happen here (if any!)