<turbo-stream action="append" target="posts_list"><template>    <div class="postbit" id="142745" data-post-id="142745">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="OvermindDL1" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/OvermindDL1/120/2677_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  OvermindDL1
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="Zesky665" data-post="3" data-topic="25240">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/zesky665/48/9525_2.png" class="avatar"> Zesky665:</div>
<blockquote>
<p>Out of curiosity does anyone use the multi_select input? I’ve seen it in the phoenix docs and on wc3 but nowhere else.</p>
</blockquote>
</aside>
<p>I use it quite an exceptionally large amount at work (school tagging lists are… extensive…).</p>
<aside class="quote no-group" data-username="Zesky665" data-post="3" data-topic="25240">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/zesky665/48/9525_2.png" class="avatar"> Zesky665:</div>
<blockquote>
<p>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?</p>
</blockquote>
</aside>
<p>No clue what a checkbox group is, I don’t recognize that W3 terminology.</p>
<p>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 <code>bugged out</code> to me?  The browser renders them as it sees fit.</p>
<aside class="quote no-group" data-username="benwilson512" data-post="4" data-topic="25240">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/benwilson512/48/1457_2.png" class="avatar"> benwilson512:</div>
<blockquote>
<p>If you want to <em>display</em> a checkbox next to each selected item in the list that’s just a CSS thing.</p>
</blockquote>
</aside>
<p>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.</p>
<aside class="quote no-group" data-username="Zesky665" data-post="5" data-topic="25240">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/zesky665/48/9525_2.png" class="avatar"> Zesky665:</div>
<blockquote>
<p>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.</p>
</blockquote>
</aside>
<p>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?</p>
<aside class="quote no-group" data-username="Zesky665" data-post="7" data-topic="25240">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/zesky665/48/9525_2.png" class="avatar"> Zesky665:</div>
<blockquote>
<p>It looks like this:</p>
</blockquote>
</aside>
<p>Those are just loose checkboxes, not a multiple selector or so.</p>
<aside class="quote no-group" data-username="Zesky665" data-post="7" data-topic="25240">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/zesky665/48/9525_2.png" class="avatar"> Zesky665:</div>
<blockquote>
<p>a single values.</p>
</blockquote>
</aside>
<p>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 <code>[]</code> to the ID’s.</p>
<aside class="quote no-group" data-username="kokolegorille" data-post="8" data-topic="25240">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/kokolegorille/48/4784_2.png" class="avatar"> kokolegorille:</div>
<blockquote>
<p>This looks like a <a href="https://hexdocs.pm/phoenix_html/Phoenix.HTML.Form.html#radio_button/4" rel="noopener nofollow ugc">radio_button </a> to me, not a checkbox.</p>
</blockquote>
</aside>
<p>Radio Buttons are a group of checkboxes that are single select, not multiple, that’s the <code>radio</code> part of it, from old interfaces.  <img src="https://forum.elixirforum.com/images/emoji/apple/slight_smile.png?v=15" title=":slight_smile:" class="emoji" alt=":slight_smile:" loading="lazy" width="20" height="20"></p>
<aside class="quote no-group" data-username="mythicalprogrammer" data-post="10" data-topic="25240">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/mythicalprogrammer/48/10430_2.png" class="avatar"> mythicalprogrammer:</div>
<blockquote>
<p>You group multiple checkboxes using the <code>name</code> option.</p>
</blockquote>
</aside>
<p>That’s a fieldset then, and it doesn’t do any inherent grouping of value keys.</p>
<aside class="quote no-group" data-username="mythicalprogrammer" data-post="10" data-topic="25240">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/mythicalprogrammer/48/10430_2.png" class="avatar"> mythicalprogrammer:</div>
<blockquote>
<p>It seems like that’s how phoenix do it but within a schema list look up (e.g. <code>name="user[famous]"</code> ).</p>
</blockquote>
</aside>
<p>Yep, this is what I was referencing with the <code>[]</code> above, Phoenix will autocollect those into a map, it’s quite convient.  <img src="https://forum.elixirforum.com/images/emoji/apple/slight_smile.png?v=15" title=":slight_smile:" class="emoji" alt=":slight_smile:" loading="lazy" width="20" height="20"></p>
<aside class="quote no-group" data-username="mythicalprogrammer" data-post="10" data-topic="25240">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/mythicalprogrammer/48/10430_2.png" class="avatar"> mythicalprogrammer:</div>
<blockquote>
<p>If you have a lot of checkboxes, I would suggest you use multiple_select from phoenix.</p>
</blockquote>
</aside>
<p>Especially with a lot, multiple select is <em>so</em> much easier on mobiles especially.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="142745" data-batch-url="/posts/batch_likers">
                        1
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/multiple-select-form-with-checkboxes/25240/12">Post #11</a>
	                </div>
	            </div>
              <div id="likers-container-142745" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="142745"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #11"></div>
  </section>
</div>
    <div class="postbit" id="246162" data-post-id="246162">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="slouchpie" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/slouchpie/120/34819_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  slouchpie
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Sorry for necromancy but critical info for posterity:</p>
<aside class="onebox allowlistedgeneric" data-onebox-src="https://phoenix-html.hexdocs.pm/Phoenix.HTML.Form.html">
  <header class="source">

      <a href="https://phoenix-html.hexdocs.pm/Phoenix.HTML.Form.html" target="_blank" rel="noopener nofollow ugc">phoenix-html.hexdocs.pm</a>
  </header>

  <article class="onebox-body">
    

<h3><a href="https://phoenix-html.hexdocs.pm/Phoenix.HTML.Form.html" target="_blank" rel="noopener nofollow ugc">Phoenix.HTML.Form — Phoenix.HTML v4.3.0</a></h3>



  </article>

  <div class="onebox-metadata">
    
    
  </div>

  <div style="clear: both"></div>
</aside>

<p>There is now a function that does this.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="246162" data-batch-url="/posts/batch_likers">
                        0
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/multiple-select-form-with-checkboxes/25240/13">Post #12</a>
	                </div>
	            </div>
              <div id="likers-container-246162" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="246162"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-standard-post cat-standard-post" title="Post #12"></div>
  </section>
</div>
    <div class="postbit" id="311331" data-post-id="311331">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="nathanl" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/nathanl/120/39891_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  nathanl
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<aside class="quote no-group" data-username="kokolegorille" data-post="11" data-topic="25240">
<div class="title">
<div class="quote-controls"></div>
<img alt="" width="24" height="24" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/kokolegorille/48/4784_2.png" class="avatar"> kokolegorille:</div>
<blockquote>
<pre data-code-wrap="elixir"><code class="lang-elixir">&lt;input name="user[roles_ids][]" type="checkbox" value="&lt;%= role.id %&gt;"
</code></pre>
</blockquote>
</aside>
<p>Also, according to <a href="https://fly.io/phoenix-files/making-a-checkboxgroup-input/" class="inline-onebox" rel="noopener nofollow ugc">Making a CheckboxGroup Input · The Phoenix Files</a></p>
<blockquote>
<p>The <code>multiple</code> option is processed in the default generated <code>input/1</code> function</p>
</blockquote>
<p>which adds <code>[]</code> to the input name, so that <code>name="tags"</code> becomes <code>name=tags[]</code> if you passed <code>multiple=true</code>. I don’t see that in a quick perusal of the docs, but maybe that’s because it’s in a generated <code>&lt;.input</code> function rather than a library function.</p>
<p>But what you said is the key.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="311331" data-batch-url="/posts/batch_likers">
                        1
                      </span>
                      <!-- <span class="thread-count js-solved-indicator" title="Marked as solution"></span> -->
	                </div>
	                <div class="go-to-post">
	                  <a title="Go to post" alt="Go to post" href="https://forum.elixirforum.com/t/multiple-select-form-with-checkboxes/25240/14">Post #13</a>
	                </div>
	            </div>
              <div id="likers-container-311331" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="311331"
                     data-batch-url="/posts/batch_likers">
                  <div class="post-likers"></div>
                </div>
              </div>
	        </div>
			

    </div>

    <div class="triangle-top-right type-last-post cat-last-post" title="Last post!"></div>
  </section>
</div>
</template></turbo-stream><turbo-stream action="replace" target="load-more-container"><template><div id="load-more-container" class="load-more-container">
    <span class="all-loaded">— All posts loaded —</span>
</div></template></turbo-stream>