fabcm1
Hi,
I am trying to use the components module that is being developed in Phoenix 1.7 in order to try the new resources from Liveview 0.18 with tailwind.
I can’t figure out what is the syntax of input/1 with type: “select” in the :option slot. It seems very different from the select/4 of Phoenix.HTML.Form. Here is an example that I am trying to make work:
In the heex, inside form, the following renders a select menu:
<%= select(f, :city_id, Enum.map(@cities, fn city -> {city.name, city.id} end)) %>
Now, I try
<.input field={{f, :city_id}} type="select" option={Enum.map(@cities, fn city -> {city.name, city.id} end)} label="choose your city" />
and it fails with
** (Protocol.UndefinedError) protocol Enumerable not implemented for {"CITY NAME", 1} of type Tuple
(elixir 1.14.0) lib/enum.ex:1: Enumerable.impl_for!/1
(elixir 1.14.0) lib/enum.ex:166: Enumerable.reduce/3
(elixir 1.14.0) lib/enum.ex:4307: Enum.reduce/3
(phoenix_live_view 0.18.2) lib/phoenix_component.ex:762: Phoenix.Component.assigns_to_attributes/2
...
thanks in advance,
Where Next?
Trending in Questions
Other Trending Topics
Latest Phoenix Threads
Latest on Elixir Forum
Sponsor Spotlight
Catch errors, track performance, monitor hosts and more.
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
- #elixirconf
- #channels
- #exunit
- #discussion
- #code-sync
- #javascript
- #podcasts
- #onsite
- #dialyzer
- #docker
- #authentication
- #umbrella
- #full-time-contract
- #podcasts-by-brainlid
- #ecto-query
- #blog-post
- #elixirconf-us
- #elixir-ls
- #ai
- #phoenix_html
- #iex
- #graphql
- #genstage
- #websockets
- #supervisor
- #advent-of-code
- #distillery
- #processes
- #api
- #forms
- #hex
- #security
- #metaprogramming
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
Catch errors, track performance, monitor hosts and more.
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.
Bringing learning, work and compliance together since 1987.
Enabling companies to succeed by building software people love.
The team behind Membrane, Popcorn, LiveDebugger. Available for hire.
Courses that'll move you from confusion to "Aha, now I get it!"
Showing Posts 1 to 5- Show Best Posts
- Show All (oldest first)
- Show All (newest first)
DecoyLexi
You can use the slot syntax for select inputs:
DecoyLexi
Update: this syntax is no longer correct. For new projects generated with Phoenix 1.7.0-rc.0, the
<.input type="select"/>component usesPhoenix.HTML.Form.options_for_selectunder the hood. Since commit 2fdb410, you’d use your original snippet withoptionchanged tooptions:bdarla
Is there any way to pass styling, e.g. different background colour for each option which shall be maintained in the selected option (dropdown functionality)?
I could find how this is possible via
Phoenix.HTML.Form.options_for_select.lc0815
I am looking for the same answer.
I can find VERY LITTLE in the form of applying ANY STYLING to phoenix1.7 html and MUCH LESS for FORMS
GOOGgeling is not our friend in this case… and I asked this question just today on my topic: forms Development
bdarla
I am not sure that we had the same problem to solve. I only needed a multicolour dropdown element.
Unfortunately, I could not solve it with pure Liveview components. Hence, I opted for javascript based solution via a hook.