ream88
Hello there,
in my current Phoenix app I extended the built-in CoreComponents module with a custom radio-card input component which renders the following TailwindUI inspired UI:
However because I needed both the label and description to accept HTML, I did the following:
defguard is_slot(attrs) when is_list(attrs) and is_map(hd(attrs)) and is_map_key(hd(attrs), :__slot__)
In the HEEX template I use the following snippet:
<%= if is_slot(@label) do %>
<%= render_slot(@label) %>
<% else %>
<span><%= @label %></span>
<% end %>
This works quite fine with the code in CoreComponents.input/1, however it still spits out a warning besides working as expected:
attr :label, :string, default: nil
attr :description, :string, default: nil
warning: undefined slot “label” for component MyAppWeb.CoreComponents.input/1
warning: undefined slot “description” for component MyAppWeb.CoreComponents.input/1
Is there a way to define an attr so it both takes a slot or an ordinary attr?
Where Next?
Trending in Questions
Other Trending Topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Master modern tools, write cleaner code, and tackle real-world challenges with Manning books, videos, and courses. Start building today.
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
- #ai
- #full-time-contract
- #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
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Error tracking, logs, uptime, and Just Enough APM. Built for developers.
Elixir, Erlang & BEAM conferences from Code Sync - join us in 2026!
Master modern tools, write cleaner code, and tackle real-world challenges.
Producing high quality Elixir screencasts since 2017.
The deployment platform built for Elixir: PaaS ease, VPS control.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"
Showing Posts 3 to 1- Show Best Posts
- Show All (oldest first)
- Show All (newest first)
ream88
Ok, took the bite and updated ALL my views, but now it’s working and no errors anymore. And the benefit is, that I can use arbitrary HTML now as my label! Thx a lot!
ream88
Hmm… this would mean a lot of changes in the (autogenerated) code, and honestly I’m not sure if I like the look of this:
vs
LostKobrakai
I’d just make the label be a slot generally. It can take a plain string just fine, but you’re able to validate things properly and you’re not working against the system. I can see the convenience of having an “input” be a slot or attr, but in practise there’s likely a lot of edge cases if that would be supported.