budgie
I’m developing a multiselect feature, and came to the conclusion that it should be implemented as styled divs that tracks their selected state in a hidden checkbox as in this example. The thing is my divs are styled differently based on the checked status.
What is the best way to update this checked state in a way that the styling of the div also changes? So far I’ve thought of two options:
- Use a live component for every item and use click events to update the styling and checkbox state. This seems like a poor option because there could be dozens or more shown on the page at any time.
- Use AlpineJS, although updating the styling might be a pain plus adds Alpine weirdness and another dependency to the project.
Neither seem like a good option, what are your thoughts? This is what I want to implement:
Where Next?
Trending in Questions
Other Trending Topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Develop your skills with books, videos, and courses.
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #deployment
- #library
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #channels
- #elixirconf
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #elixir-ls
- #blog-post
- #phoenix_html
- #iex
- #graphql
- #ai
- #genstage
- #elixirconf-us
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #metaprogramming
- #security
- #hex
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Error tracking, logs, uptime, and Just Enough APM. Built for developers.
Develop your skills with books, videos, and courses.
Bringing learning, work and compliance together since 1987.
The deployment platform built for Elixir: PaaS ease, VPS control.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"
Showing Posts 1 to 3- Show Best Posts
- Show All Posts (oldest first)
- Show All Posts (newest first)
Eiji
Plain
CSS? Also I would rather suggest usinglabelinstead ofdivas this way you don’t have to add any hooks,JavaScriptcode orphoenixevents.Helpful resources
https://caniuse.com/mdn-html_elements_input_checked
https://caniuse.com/css-has
rakesh-gupta29
You should be adding a label and a input pair and all the event handling will be done for you. use plain css or if using tailwind, there are utility classes for checked state as well as group, peer and has selectors which you can use to handle the UI.
garrison
What you’re looking for is a classic CSS trick called a “checkbox hack”. Search that for endless examples. Here’s a good one:
One thing to be careful of is that hiding the checkbox makes the form inaccessible (it can’t be tabbed to). You can fix this by positioning the real checkbox offscreen (
position: fixed; top: -9999px;, etc) and then styling the visible fake checkbox with an outline when the real (off-screen) checkbox is focused. I mention this because, strangely, I’ve never seen it mentioned anywhere else (though I strongly doubt I am the first person to think of it).