Fl4m3Ph03n1x
Background
I have a custom component in my LiveView, which is basically a group of checkboxes.
I want to add a new attribute to my custom component, however no matter what I do, I always get nil when accessing said attribute.
Code
core_components.ex
@doc """
Generate a checkbox group for multi-select.
## Examples
<.checkgroup
field={@form[:genres]}
label="Genres"
options={[{"Fantasy", "fantasy"}, {"Science Fiction", "sci-fi"}]}
selected={[{"Fantasy", "fantasy"}]}
/>
"""
attr :id, :any
attr :name, :any
attr :label, :string, default: nil
attr :field, Phoenix.HTML.FormField, doc: "a form field struct retrieved from the form, for example: @form[:genres]"
attr :errors, :list
attr :required, :boolean, default: false
attr :rest, :global, include: ~w(form readonly)
attr :class, :string, default: nil
attr :options, :list, default: [], doc: "the options to pass to Phoenix.HTML.Form.options_for_select/2"
attr :selected, :list, default: [], doc: "the currently selected options, to know which boxes are checked"
attr :meow, :any, default: "meow", doc: "a very cool new attribute!"
def checkgroup(assigns) do
new_assigns =
assigns
|> assign(:multiple, true)
|> assign(:type, "checkgroup")
input(new_assigns)
end
def input(%{type: "checkgroup"} = assigns) do
~H"""
<p> <%= "Cat says: #{@meow}" %></p>
<div class="mt-2">
<%= for opt <- @options do %>
<div class="relative flex gap-x-3">
<div class="flex h-6 items-center">
<input id={opt.id} name={@name} type="checkbox" value={opt.id} checked={opt in @selected} disabled={false} />
</div>
<div class="text-sm leading-6">
<label for={opt.id} ><%= opt.name %></label>
</div>
</div>
<% end %>
</div>
"""
end
Here I am using a customer component to render a stylish checkbox group. It works fine, except for the :meow attribute, which somehow is always nil when inside the input function.
Error
Using this code as a sample:
<.checkgroup field={@form[:my_form]} label="SUper question!" options={@sounds} selected={@selected_sounds} meow={[1, 2]} required />
I get the following error upon rendering this code:
** (exit) an exception was raised:
** (KeyError) key :meow not found in: %{
__changed__: nil,
__given__: %{
__changed__: nil,
__given__: %{
__changed__: nil,
__given__: %{
__changed__: nil,
field: %Phoenix.HTML.FormField{
id: "my_form",
name: "my_form",
errors: [],
field: :my_form,
form: %Phoenix.HTML.Form{
source: %{"some_command" => []},
impl: Phoenix.HTML.FormData.Map,
id: nil,
name: nil,
data: %{},
hidden: [],
params: %{"some_command" => []},
errors: [],
options: [],
index: nil,
action: nil
},
value: nil
},
label: "SUper question!",
meow: [1, 2],
options: [1, 2, 3, 4],
# .... more things follow
As you can see, meow: [1, 2], is clearly present. Yet, @meow returns nil and using assigns.meow outright crashes the application.
What am I doing wrong here and how can I fix it?
Trending in Questions
I having some trouble figuring out if I have set myself too strict of standards for my production server. Currently I can handle 75% of r...
New
Hello,
I’m trying to build a basic Phoenix web-app, and I’d like to use Tailwind.
However, when I launch mix phx.server, I get an error...
New
I really like the adapter patterns that ecto, nebulex, waffle, etc. use and would love find something similar for a key management servic...
New
Hello folks!
So at work, we are seeing some situations where we have to define some “fixed” strings that are used across the codebase in...
New
I’m working on a small exercise involving update_in/3, and I came up with this solution:
data = %{
name: "Periodic Table",
category:...
New
How Can I Optimise Compile Time Dependencies
I have been building an elixir application for about 2 years now. Many modules and files ha...
New
Is there any way to avoid the Hologram compiler running when using iex? It seems like the front-end code could potentially be disregarded...
New
Other Trending Topics
Edit: 2026 May 15 - This post is archived.
Mob is alive!!
Main docs: mob v0.7.11 — Documentation
A bit of explanation for the slightly c...
New
Hobbes is a low-level distributed database for the Elixir programming language.
Hobbes provides a simple, safe, and scalable storage lay...
New
A little off-topic, but I feel like people here have a good head on their shoulders.
I used to be quite good at making software. Was luc...
New
Hey. Is there anyone here who creates agents in their apps? Not talking about using agents, but creating them. I’m finding it pretty diff...
New
I fully migrated to my own harness from Anthropic/Gemini and I think it’s time to share it. Welcome DSH, the DeepSeek Harness, fully writ...
New
ExRatatui lets you cook up rich terminal UIs in Elixir, powered by Rust’s ratatui via Rustler NIFs. Build interactive terminal applicatio...
New
Categories:
Sub Categories:
Forums
Popular Tags
- #ecto
- #liveview
- #troubleshooting
- #learning-elixir
- #library
- #deployment
- #erlang
- #testing
- #genserver
- #mix
- #absinthe
- #remote-other
- #otp
- #plug
- #how-to-question
- #macros
- #postgres
- #elixirconf
- #channels
- #exunit
- #discussion
- #code-sync
- #podcasts
- #javascript
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #ai
- #podcasts-by-brainlid
- #ecto-query
- #blog-post
- #elixirconf-us
- #elixir-ls
- #phoenix_html
- #iex
- #graphql
- #genstage
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #elixirconf-eu
- #api
- #forms
- #security
- #metaprogramming











Showing Posts 1 to 5- Show Best Posts
- Show All (oldest first)
- Show All (newest first)
sodapopcan
It’s saying
:meowisn’t found inside a map only has the keys:__changed__and:__given__at its root, so that makes sense. It looks like there is some odd recursion going on in the map assignment as you those two meta keys are getting nested a couple of times. Is there any intermediary code you haven’t shared that might help diagnose? One thing that does stand out is that yourattrcalls are now tied tocheckboxandinputdoes have any, though perhaps you just left those out for the example. It may be as simple as changingdef checkgrouptodef input. This is more inline with the generated API anyway where everything is aninputwith atype.Fl4m3Ph03n1x
No intermediary code. All the things done here are done by the Phoenix framework.
I am confused. I have created a component,
checkgroup. Yes, I do use theinputfunction, but I pass it the type (type: checkgroup) as well, so I don’t understand how this can be an issue.If the
inputfunction does magic behind the scenes (which maybe it does) then that would explain the behaviour, but other than that I am quite lost.I very much like the API of
.checkgroup, for acheckgroupis not an input, but a collection of connected inputs. I based this code on this tutorial:Fl4m3Ph03n1x
I did find another input function from
core_componentsthat is run before my final function:I guess I could change this one, but I am not sure if there is a better way.
Fl4m3Ph03n1x
After a lot of digging around, i realized that all of the
inputfunctions deal withassigns. This meant that some things are being done that I dont fully understand, not control.I decided to move away from using/modifying the
inputfunctions and created my own component from scratch:which works as expected and all the
assignsnot have the expected values.sodapopcan
Crap, sorry, I was working on a response to this a few days ago and got distracted
Sorry about that! Glad you solved it!