How to have both list checkbox and select?

Using Vue, I want a list where:

  1. each item has a checkbox, which can be toggled by tapping on it on the left
  2. smart select or link opened by tapping on the item outside the checkbox

A lot of mobile email apps, including Gmail, work this way. If you tap on email in list, it opens. But you can also tap on a checkbox on left side of the item to do bulk select.

1 Like

This requires a bit of custom styles, here is the example https://jsfiddle.net/s2bqh75j/

1 Like

That’s awesome! Thanks so much!

One extra note about styling is that the checkbox in general is hard to press on because it’s small. I find it helps to add padding to it to make a larger tap region. Maybe the default checkbox style should have a larger padding region?

  .root-checkbox {
    padding: .5rem; // need padding to make it easier to tap
    position: absolute;
    top: 50%;
    margin-top: calc(-1 * var(--f7-checkbox-size) / 2 - .5rem);
    left: calc(var(--f7-list-item-padding-horizontal) + var(--f7-safe-area-left) - .5rem);
  }