Is there an alternative to the dynamic number of inputs checkbox 'solution'?

Phoenix Forum Questions / Help
1

Hi,

I haven’t used LiveView for a while and was just watching ‘The Road to LiveView 1.0’ keynote, particularly the part about the dynamic number of inputs checkbox solution. I see it’s also mentioned in the hex docs.

To me it doesn’t sound like an actual solution. The main reason being that it’s not a semantically correct use of the checkbox which causes several issues:

  • An accessibility issue. You may style your checkbox as a button but it still has the checkbox role. For the user it should have the role button and behave like a button. If the developer doesn’t pay attention to this (and most don’t) it will be incorrect by default.
  • A mental model issue. As a developer I want the user to be able to perform an action (add/delete an item). That means a button in this case, not an input. Now it feels like a workaround where I have to check the docs all the time. When looking at the html it just doesn’t make sense.

It also seems to count on a certain way checkboxes are handled in LiveView.

Is it possible to do the same thing the checkbox solution does but with an actual button?

2

One of the benefits of this solution is that it works outside of LV and without js. Ecto is handling http params in a certain way and that’s it. This makes this solution much more flexible and portable than anything depending on LV.

But I do agree that it comes with downsides. E.g. you cannot have both prepend and append button after the items, because the place those checkboxes exist in relative to rendered children matters.

If you want to go the “have a real button” route you can still use the approach I outlined here:

Edit:

Thinking of it a bit more:
How about real buttons + some js to toggle the checkboxes (which could then be hidden)?

3

Thanks for the article, I’ll check it out!

I understand the benefits on that side but I don’t see any benefits from the developer/user perspective besides making it easier to get something working quickly (with caveats).

It seems to depend on the way ecto handles things and how checkboxes are handled which feels very brittle.
That and the downsides that were mentioned make the checkbox solution an unacceptable one for me personally.

I have no problem with a solution that’s a little more work but actually makes sense and is semantically correct.