ianp99
How can I add checked attribute in heex to <input>
I am new to Phoenix and Elixir and I am quite bad at it.
I am making a component todos which successfully fetches the todos from the database, and for each one should create a todo element. It works, except for making the checkbox input checked depending on the todo.finished property. How can I make it so has attribute checked if todo.finished is true?
def todos(assigns) do
todos = Repo.all(Todo);
~H"""
<ul class="w-15">
<%= for todo <- todos do %>
<li class="flex justify-between">
<h1><%= todo.name %></h1>
<div>
<input type="checkbox" <%= if todo.finished, do: "checked" %>/>
<button class="h-4 w-4">
</button>
</div>
</li>
<% end %>
</ul>
"""
end
I would like it if the answer contained code, because I am not familiar with many terms in Phoenix.
Marked As Solved
jswanner
This should be:
<input type="checkbox" checked={todo.finished} />
Also Liked
codeanpeace
I’ve experienced the same and dug into how the “checkbox” type input from core_components.ex remedies it via Phoenix.HTML.Form.normalize_value/2.
def input(%{type: "checkbox", value: value} = assigns) do
assigns =
assign_new(assigns, :checked, fn -> Phoenix.HTML.Form.normalize_value("checkbox", value) end)
...
end
normalize_value(arg1, value)
Normalizes an input
valueaccording to its inputtype.Certain HTML input values must be cast, or they will have idiosyncracies when they are rendered. The goal of this function is to encapsulate this logic. In particular:
…
- For “checkbox” types, it returns a boolean depending on whether the input is “true” or not
Popular in Questions
Other popular topics
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
- #phoenix_html
- #iex
- #blog-post
- #graphql
- #genstage
- #ai
- #websockets
- #supervisor
- #advent-of-code
- #elixirconf-us
- #distillery
- #processes
- #forms
- #api
- #metaprogramming
- #security
- #performance








