im3000
Surface - Set custom CSS error class for text inputs
Hello!
I am stuck figuring out how to set a custom CSS classes for text inputs in Surface. Basically, I would like to add a red border for the invalid text field. I can probably use class={invalid: @field_status}, but I am wondering if there is somehow a way to make this apply for all fields by creating some kind of helper or wrapper. For the reference, I am using Ecto and there are changesets involved for the forms in question.
Any help, pointers, links are much appreciated. Thank you!
Most Liked
im3000
Thank you for the answer @Malian!
As you suggested, I could probably get away with a derived input component. What I had in mind was a tighter coupling to Ecto changesets, but that coupling might be too tight. On the other hand all the information is already probably there.
The idea sparked after reading Dynamic forms with Phoenix « Plataformatec Blog post and especially the “Customizing Inputs” section. I am thinking if Surface has an Field tag that acts as a wrapper for inputs and error tags it might be quite easy to add an error CSS class to the inputs that the field is wrapping. With that said, I haven’t looked at the Surface’s code too close yet so take my thoughts with a pinch of salt.
What do you think? Is it doable or is it not in line with Surface’s design philosophy?
Popular in Questions
Other popular 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
- #channels
- #elixirconf
- #exunit
- #discussion
- #javascript
- #code-sync
- #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
Our Sponsors
Build Elixir applications with speed and confidence.
Supporting innovation across the BEAM ecosystem.
We build reliable cloud platforms for business-critical systems.
Catch errors, track performance, monitor hosts and more.
Real-time error tracking, performance insights, and observability for devs.
Practical resources that improve the lives of professional developers.
Producing high quality Elixir screencasts since 2017.
The deployment platform built for Elixir: PaaS ease, VPS control.
Courses that'll move you from confusion to "Aha, now I get it!"