How can I add checked attribute in heex to <input>

Phoenix Forum Questions / Help
,
1

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.

2

This should be:

<input type="checkbox" checked={todo.finished} />
1 Like
3

I edited this post to say thank you, it worked.

4

I’ve noticed devtools can be wonky with about showing boolean attributes sometimes.

5

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 value according to its input type.

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

source: Phoenix.HTML.Form — Phoenix.HTML v4.0.0

1 Like
6

I’ve noticed this too but I can’t seem to reproduce the flaky devtools behaviour. I thought that maybe it was if you gave it something other than "true" or "false" but I’ve tried other values and they are showing up in devtools. Thought maybe it was in chrome that that was happening. I’m not sure.