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


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="josevalim" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/josevalim/120/1787_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  josevalim
                  </h3>
		          </div>
						
			          <div class="user-title">
									<span>Creator of Elixir</span>
			          </div>
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I have read the thread and I am not sure I can think of an “optimal” solution.</p>
<p>We could rename “checkbox” to “boolean”, but all other input types are named after their HTML counter-parts, not their types, so having this named “boolean” would be confusing in a different way. Perhaps “boolean_checkbox”. But those are all not optimal to justify changing the generators.</p>
<p>Similarly, we could change the name of the function, but I am not exactly sure it helpers either. <code>&lt;.input</code>s clearly do more than the regular <code>&lt;input</code>, based on the fact it renders labels and everything else, so I am not sure if the name would make such a big difference. I assume the first instinct <a class="mention" href="/u/gorghoa" rel="nofollow">@gorghoa</a> would have, regardless of the name, is to use whatever is provided.</p>
<p>Then there is the case of multiple checkboxes but then I think it deserves its own input type and I don’t think you can build on top of <code>&lt;.input type="checkbox"&gt;</code> anyway because you will likely make different assumptions regarding styling.</p>
<p>WIth all that said, it sounds like improved documentation is the best way to go about it. Perhaps a summary of HTML input types and their supported types.</p>
<p>EDIT: better docs here: <a href="https://github.com/phoenixframework/phoenix/commit/b8fe141a8c38b44daa7cbe3927930d1054976222" class="inline-onebox" rel="nofollow">Improve .input docs · phoenixframework/phoenix@b8fe141 · GitHub</a></p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="285459" data-batch-url="/posts/batch_likers">
                        6
                      </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/semantics-of-the-input-type-checkbox-in-core-components/55356/12">Post #11</a>
	                </div>
	            </div>
              <div id="likers-container-285459" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="285459"
                     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="285463" data-post-id="285463">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="gorghoa" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/gorghoa/120/20472_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  gorghoa
                    <span class="op-star" title="Thread Starter">
                      <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                    </span>
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Thanks <a class="mention" href="/u/josevalim" rel="nofollow">@josevalim</a> for your insights!</p>
<blockquote>
<p>I assume the first instinct <a class="mention" href="/u/gorghoa" rel="nofollow">@gorghoa</a> would have, regardless of the name, is to use whatever is provided.</p>
</blockquote>
<p>Correct, knowing myself I would have still assumed that the underlying html element would have handled my native looking attrs like <code>value</code> and <code>checked</code> to behave somehow the same as the native html’s checkbox <img src="https://forum.elixirforum.com/images/emoji/apple/smiley.png?v=15" title=":smiley:" class="emoji" alt=":smiley:" loading="lazy" width="20" height="20">. But seeing that that it doesn’t, I would have immediately reached to the documentaion. So, I also think that the documentation is a good place for disambiguation on this matter <img src="https://forum.elixirforum.com/images/emoji/apple/+1.png?v=15" title=":+1:" class="emoji" alt=":+1:" loading="lazy" width="20" height="20"> .</p>
<p>Thanks also for editing doc, at least it is stated that the checkbox component is boolean only, it’s great.</p>
<p>But I fear the last part forwarding to mdn of the edited doc somehow adds up to the confusion, since the doc doesn’t state exactly where it will be ok or not to rely on mdn docs for native looking html attributes <img src="https://forum.elixirforum.com/images/emoji/apple/upside_down_face.png?v=15" title=":upside_down_face:" class="emoji" alt=":upside_down_face:" loading="lazy" width="20" height="20">  (even though the checkbox is really the exception).</p>
<blockquote>
<p>See <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input" class="inline-onebox" rel="noopener nofollow ugc">&lt;input&gt; HTML input element - HTML | MDN</a><br>
for more information.</p>
</blockquote>
<p>Ideally, we could document the <code>.input[type=checkbox]</code> variation specifically to state the behavior of <code>value</code>. (How it is handled, and why it does not set the underlying html values.</p>
<p>For the second point, regarding that the <code>value</code> attr is de facto required even though it’s barely used by the function and that the macro <code>attr</code> states it as optional, do you reckon that the pattern matching on it is really mandatory?</p>
<p>I would like to propose something like this:</p>
<p>From:</p>
<pre data-code-wrap="ex"><code class="lang-ex"> def input(%{type: "checkbox", value: value} = assigns) do
   assigns =
     assign_new(assigns, :checked, fn -&gt; Phoenix.HTML.Form.normalize_value("checkbox", value) end)
</code></pre>
<p>To:</p>
<pre data-code-wrap="ex"><code class="lang-ex"> def input(%{type: "checkbox"} = assigns) do
   assigns =
     assign_new(assigns, :checked, fn -&gt; Phoenix.HTML.Form.normalize_value("checkbox", assigns[:value] || false) end)
</code></pre>
<p>I may be perceived as a nitpicker here, and I’m sorry for that :D. Besides, I really do find that those core_components shipped with new phoenix apps are great since they really help to grok what are the best practices on structuring and writing functional components. Thank you for that (and the rest).</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="285463" 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/semantics-of-the-input-type-checkbox-in-core-components/55356/13">Post #12</a>
	                </div>
	            </div>
              <div id="likers-container-285463" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="285463"
                     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="285470" data-post-id="285470">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="josevalim" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/josevalim/120/1787_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  josevalim
                  </h3>
		          </div>
						
			          <div class="user-title">
									<span>Creator of Elixir</span>
			          </div>
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>I think this would work too, right?</p>
<pre data-code-wrap="elixir"><code class="lang-elixir">def input(%{type: "checkbox"} = assigns) do
   assigns =
     assign_new(assigns, :checked, fn -&gt; Phoenix.HTML.Form.normalize_value("checkbox", assigns[:value]) end)
</code></pre>
<p>Since everything except “true” or true are considered false anyway. If so, feel free to PR. I think the pattern match was a mistake indeed.</p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="285470" 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/semantics-of-the-input-type-checkbox-in-core-components/55356/14">Post #13</a>
	                </div>
	            </div>
              <div id="likers-container-285470" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="285470"
                     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 #13"></div>
  </section>
</div>
    <div class="postbit" id="285477" data-post-id="285477">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="gorghoa" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/gorghoa/120/20472_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  gorghoa
                    <span class="op-star" title="Thread Starter">
                      <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                    </span>
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>Thanks Jose, I will PR 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="285477" 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/semantics-of-the-input-type-checkbox-in-core-components/55356/15">Post #14</a>
	                </div>
	            </div>
              <div id="likers-container-285477" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="285477"
                     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 #14"></div>
  </section>
</div>
    <div class="postbit" id="285679" data-post-id="285679">
  <section>
    <div class="post-wrap">


					<div class="post-header">
		        <div class="user-avatar">
		          <img alt="gorghoa" src="https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/gorghoa/120/20472_2.png" width="120" height="120" />
		        </div>
					
						<div class="user-details">
		          <div class="user-name">
		            <h3>
                  gorghoa
                    <span class="op-star" title="Thread Starter">
                      <img alt="OP" class="op-star-icon" src="/assets/thread-icons/thread-icon-thread-starter-df91e872.png" />
                    </span>
                  </h3>
		          </div>
						
						</div>
					
					</div>

	        <div class="thread-main">
	            <div class="post-body" data-turbo="false">
								<p>And here is the PR: <a href="https://github.com/phoenixframework/phoenix/pull/5427" class="inline-onebox" rel="noopener nofollow ugc">Allow `&lt;.input type="checkbox"&gt;` without `value` attr in core components by gorghoa · Pull Request #5427 · phoenixframework/phoenix · GitHub</a></p> 
	            </div>

	            <div class="base-line">
	                <div class="thread-counters">
	                    <span class="thread-count count-likes js-likers-trigger" title="Likes" data-post-id="285679" data-batch-url="/posts/batch_likers">
                        2
                      </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/semantics-of-the-input-type-checkbox-in-core-components/55356/16">Post #15</a>
	                </div>
	            </div>
              <div id="likers-container-285679" 
                   class="likers-container"
                   data-first-post="false"
                   data-batch-url="/posts/batch_likers">
                   <div class="likers-placeholder" 
                     data-likers-post-id="285679"
                     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>