brainlid

brainlid

Phoenix Blog Post: Making a CheckboxGroup Input

Phoenix 1.7.0 brings a lot of new things when we run mix phx.gen my_app. These new and cool ways of doing things aren’t automatically brought to existing projects because they come from the generators. Of the many new things we could bring to an existing project, we focus on the new approach to form input components. Why? Because it’s both cool and useful! This post builds a custom multi-select checkbox group input for selecting which tags to associate with a database record in our Phoenix application. It’s surprisingly easy and elegant!

Most Liked

LostKobrakai

LostKobrakai

I recently build something like this as well: https://kobrakai.de/scratchpad/checkboxes

One problem, which I didn’t see discussed in the blog post is that you cannot submit an empty list due to how inputs are serialized in html. So no way to unselect everything and have it save properly. I do have one workaround to that in my code, but there are a few ones with different tradeoffs.

brainlid

brainlid

I updated the article to support dealing with an empty list. This lets you assign tags and then remove all the tags.

Updates:

  • Tagging post - updated schema changeset functions to remove blank entries. Used by the UI.
  • This article - added a hidden input to always send a value. In this case, it sends "". The blank value is removed during processing. This is the fix.
  • gist - The gist was updated for the fix. Added the separate ChangesetHelpers file for a more complete solution in the gist.
brainlid

brainlid

Good catch! Thanks for bringing that to my attention!

Where Next?

Popular in Blog Posts Top

SmartLogic
Season four of the Elixir Wizards podcast launches today! This season we’re focused on system and application architecture. We’ll be doin...
New
New
sashaafm
How to use the blogs section You can post links to your blog posts either in one of the Official Blog Posts threads (like this one), or, ...
296 25328 131
New
JohnnyCurran
I’ve been writing LiveView since 2020. In that time, I’ve seen the same three form mistakes at multiple companies. Here’s what they are a...
New
brainlid
OTP 26 was released and the Elixir 1.14.4 builds have been updated! Erlang OTP 26 changed how map keys are sorted, or not sorted actually...
New
paulanthonywilson
Post on using UDP multicasting with Elixir to broadcast presence, and listen for peers, on a local network. I have found this approach us...
New
brainlid
This post asks if we can remove Alpine from the PETAL stack. Can we do everything we need with just LiveView? Also, let’s explore an area...
New
PragTob
I ran into an interesting problem recently where simple concurrency on the BEAM via Task.async made my application a lot slower and a lot...
New
PragTob
Elixir is a great language, but some behavior can be unintuitive, confusing and in the worst case lead to bugs. So, I took a look at 10 E...
New
bemesa21
Add drag-and-drop functionality to your Phoenix LiveView app with SortableJS and LiveView Hooks! This posts shows you how to create an in...
New

Other popular topics Top

danschultzer
None of the current solutions worked well for me, so I went ahead and built a user management system from scratch. This project took far...
548 29377 241
New
lastday4you
I wanted to check elixir version in phoenix because i found that my elixir is 1.5 but when i use Enum.chunk_by it said the function is un...
New
lessless
I believe there are people here who are dealing with CSV files import on the daily basis, and since Excel is a really popular tool there ...
New
msaraiva
Surface is an experimental library built on top of Phoenix LiveView and its new LiveComponent API that aims to provide a more declarative...
564 43622 214
New
dokuzbir
I want to highlight html closing tags when i click a html tag. That works in .html files but doesnt work for html.eex templates. How can...
New
alice
Hey, Just curious what are the main benefits of Elixir compared to Clojure? When is Elixir more useful than Clojure and vice versa? Th...
New
klo
Got a question about when to concat vs. prepending items to list then reversing to achieve appending. So i know lists boil down to [1 | ...
New
komlanvi
Hi everyone, I was playing with phoenix liveView but I run into an issue. I have a form and want to validate each input text when the te...
New
marick
I had some trouble figuring out how to make many-to-many associations work. Once I got it working, I wrote a blog post. Because I’m a nov...
New
sergio
Kind of like when jquery came out, it was super necessary. Existing drag and drop libraries have a bunch of baggage to support old browse...
New

We're in Beta

About us Mission Statement