Hi,
Is there any standard way to implement a multiple select form with checkboxes in phoenix?
I know that there is a multi-select thingy in the Phoenix.HTML module, but that’s weird and I have no idea how or why anyone would use it.
Thanks
Standard way would be to use the multi select helper from Phoenix.
Ooook. If you don’t want to use it, just write up the normal HTML.
2 Likes
Out of curiosity does anyone use the multi_select input? I’ve seen it in the phoenix docs and on wc3 but nowhere else.
Is there something you’re supposed to do with it on the front end to make it look like a checkbox group or does it always look like a bugged out select?
Btw, I managed to make something like a checkbox group with the phoenix.form and some js but I doubt its best practice.
1 Like
I did miss that your question included checkboxes, I don’t really understand what that is. Multi select is a drop down that lets you select multiple items in the list, and checkboxes are their on individual thing. If you want to display a checkbox next to each selected item in the list that’s just a CSS thing.
1 Like
I’m sure you’ve seen forms where you have multiple checkboxes that you can select. Like in an advanced search section. I was trying to do something similar but have the form be dynamically created with the relevant values. This is very similar (identical) to what a multiple_select does, I just wanted it to be a group of checkboxes rather than a multi select input.
It seemed kind of obvious that something like this would be standard, but it seems it isn’t. 
Let’s take a step back and look at the actual problem you’re trying to solve, cause I think the focus on multi select has confused things. Is the thing you’re trying to do simply to have N check boxes in the form, where the number and label of each is dynamic?
Yes, but I also want all of the checked values to be sent back as a single value like with a multiple_select.
It looks like this:
And I want to be able to select any number of them and have the list of selected values be sent back as a single values.
Right now, I have a hidden text input where I add the ids with an onclick function. This works well enough but I’m sure it isn’t best practice.
You can only choose one option in radio button, at least in html.
It seems like OP wants to have check boxes so user can choose multiple options?
2 Likes
You group multiple checkboxes using the name option.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox
<fieldset>
<legend>Choose your interests</legend>
<div>
<input type="checkbox" id="coding" name="interest" value="coding" checked>
<label for="coding">Coding</label>
</div>
<div>
<input type="checkbox" id="music" name="interest" value="music">
<label for="music">Music</label>
</div>
</fieldset>
It seems like that’s how phoenix do it but within a schema list look up (e.g. name="user[famous]").
https://hexdocs.pm/phoenix_html/Phoenix.HTML.Form.html#checkbox/3
<input checked="checked" id="user_famous" name="user[famous]" type="checkbox" value="true">
If you have a lot of checkboxes, I would suggest you use multiple_select from phoenix.
I know it is possible because I have done that before with Rails and SimpleForm…
This example is a many_to_many relationship between User and Role. The point is to use simple input and specify the name of the checkbox as user[roles_ids][] with square brackets at the end.
<%= for role <- @roles do %>
<label>
<%= role.name %>:
<input name="user[roles_ids][]" type="checkbox" value="<%= role.id %>">
</label>
<% end %>
And that is the log from the request (with stripped csrf token) when I select roles 1 and 2.
[debug] Processing with DemoWeb.UserController.create/2
Parameters: %{"_utf8" => "✓", "user" => %{"name" => "hello", "roles_ids" => ["1", "2"]}}
Pipelines: [:browser]
As You can see, I get a list of ids 
As a side note, it’s possible to add a check value to checkbox like this…
checked="<%= user_has_role?(@user, role)%>"
… as mentionned in this old post Many to many checkbox form
14 Likes
I use it quite an exceptionally large amount at work (school tagging lists are… extensive…).
No clue what a checkbox group is, I don’t recognize that W3 terminology.
A multi-select form is a multiple-selection form. I tend to have them be size=10 or so high, depending on the usage context. They’ve never looked bugged out to me? The browser renders them as it sees fit.
Depending on the browser, I’m unsure if the internal elements can be reliably styled like that as sometimes they just default down to the standard operating system render of it.
Those aren’t called anything like “checkbox groups” (at least in W3 definitions), those are just loose checkboxes within a form. Those are pretty trivial to do. Why not just render a list of those?
Those are just loose checkboxes, not a multiple selector or so.
A single value or multiple values? I’d imagine they would have to be multiple values since there are multiple items, though you can easily pack those into, for example, a map or so via adding [] to the ID’s.
Radio Buttons are a group of checkboxes that are single select, not multiple, that’s the radio part of it, from old interfaces. 
That’s a fieldset then, and it doesn’t do any inherent grouping of value keys.
Yep, this is what I was referencing with the [] above, Phoenix will autocollect those into a map, it’s quite convient.
Especially with a lot, multiple select is so much easier on mobiles especially.
1 Like
Sorry for necromancy but critical info for posterity:
https://hexdocs.pm/phoenix_html/Phoenix.HTML.Form.html#multiple_select/4
There is now a function that does this.
Also, according to Making a CheckboxGroup Input · The Phoenix Files
The
multipleoption is processed in the default generatedinput/1function
which adds [] to the input name, so that name="tags" becomes name=tags[] if you passed multiple=true. I don’t see that in a quick perusal of the docs, but maybe that’s because it’s in a generated <.input function rather than a library function.
But what you said is the key.
1 Like
