# Render error message for hidden field

**URL:** <https://forum.elixirforum.com/t/render-error-message-for-hidden-field/64027>\
**Category:** Questions\
**Tags:** phoenix, error-handling, liveview\
**Created:** [June 6, 2024, 11:12pm UTC](https://forum.elixirforum.com/t/render-error-message-for-hidden-field/64027 "2024-06-06T23:12:33Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![willc0de4food](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/willc0de4food/32/31975_2.png) [@willc0de4food](https://forum.elixirforum.com/u/willc0de4food)\
**Post date:** [June 6, 2024, 11:12pm UTC](https://forum.elixirforum.com/t/render-error-message-for-hidden-field/64027/1 "2024-06-06T23:12:33Z")

</div>

Hello! I have a hidden input and I’m using buttons to set it’s value. The default value for this field is nil. If a user doesn’t select one of the options, I would like to show the error from the changeset beneath the buttons, like with other form fields that have automatic error handling. How can this be done?

I’ve seen references to an `error_tag`, but such a tag no longer exists as far as I can tell?

Thanks!

---

<div class="post-metadata">

**Author:** ![msmithstubbs](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/msmithstubbs/32/22939_2.png) [@msmithstubbs](https://forum.elixirforum.com/u/msmithstubbs)\
**Post date:** [June 7, 2024, 12:24am UTC](https://forum.elixirforum.com/t/render-error-message-for-hidden-field/64027/2 "2024-06-07T00:24:30Z")

</div>

Before Phoenix 1.7 `error_tag` was a function defined for you in the `ErrorHelpers` module ([source](https://github.com/phoenixframework/phoenix/issues/5227#issuecomment-1400423507)).

Since 1.7 there is a `CoreComponents` module. If has an `<.input />` component that renders an input field with error feedback using `<.error />`. So you could use that:

```elixir
<.input field={@form[:some_field]} type="hidden" />

```

This will generate a hidden input field and the error feedback.

If you’d rather display the error yourself you can just access it directly: `@form[:some_field].errors` and render it as you like.

~~The [Phoenix Form Bindings guide](https://hexdocs.pm/phoenix_live_view/form-bindings.html#error-feedback) discusses using `phx-feedback` attribute for styling and hiding error messages.~~

Updated: Just noticed [LiveView 1.0 will drop support for `phx-feedback`](https://github.com/phoenixframework/phoenix_live_view/blob/02bc543fc2602a1de3f53dbfe2bbdfef443806ac/CHANGELOG.md#migrating-from-phx-feedback-for).

---

<div class="post-metadata">

**Author:** ![willc0de4food](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/willc0de4food/32/31975_2.png) [@willc0de4food](https://forum.elixirforum.com/u/willc0de4food)\
**Post date:** [June 7, 2024, 7:29am UTC](https://forum.elixirforum.com/t/render-error-message-for-hidden-field/64027/3 "2024-06-07T07:29:27Z")

</div>

Oh, that’s awesome. That actually works great, idk why I didn’t think of that 😅  
Thanks!

---

<div class="post-metadata">

**Author:** ![willc0de4food](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/willc0de4food/32/31975_2.png) [@willc0de4food](https://forum.elixirforum.com/u/willc0de4food)\
**Post date:** [June 7, 2024, 3:09pm UTC](https://forum.elixirforum.com/t/render-error-message-for-hidden-field/64027/4 "2024-06-07T15:09:16Z")

</div>

After implementing this, it _does_ work but I’m also getting warnings in the console about it. Do you just ignore them? Lol

```elixir
     warning: attribute "type" in component NuzzleWeb.CoreComponents.input/1 must be one of ["checkbox", "color", "date", "datetime-local", "email", "file", "month", "number", "password", "range", "search", "select", "tel", "text", "textarea", "time", "url", "week"], got: "hidden"
     │
 142 │ <.input type="hidden" field={@form[:gender]} />
     │ ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
     │
     └─ lib/nuzzle_web/live/quote.ex:142: (file)

```

---

<div class="post-metadata">

**Author:** ![LostKobrakai](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/lostkobrakai/32/3072_2.png) [@LostKobrakai](https://forum.elixirforum.com/u/LostKobrakai)\
**Post date:** [June 7, 2024, 4:24pm UTC](https://forum.elixirforum.com/t/render-error-message-for-hidden-field/64027/5 "2024-06-07T16:24:06Z")

</div>

`<.input>` bundles a bunch of markup around labels and errors together, which doesn’t really make sense for hidden inputs. You can just use a normal input and the `<.error>` component separately.

---

<div class="post-metadata">

**Author:** ![willc0de4food](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/willc0de4food/32/31975_2.png) [@willc0de4food](https://forum.elixirforum.com/u/willc0de4food)\
**Post date:** [June 11, 2024, 9:23pm UTC](https://forum.elixirforum.com/t/render-error-message-for-hidden-field/64027/6 "2024-06-11T21:23:10Z")

</div>

Are you aware of an example somewhere that shows what this would look like?  
The only example I have come across with the `<.error>` component is this, which doesn’t seem relevant for showing errors for a single input:  
`<.error :for={msg <- @errors}><%= msg %></.error>`

---

<div class="post-metadata">

**Author:** ![LostKobrakai](https://forum.elixirforum.com/user_avatar/forum.elixirforum.com/lostkobrakai/32/3072_2.png) [@LostKobrakai](https://forum.elixirforum.com/u/LostKobrakai)\
**Post date:** [June 11, 2024, 9:26pm UTC](https://forum.elixirforum.com/t/render-error-message-for-hidden-field/64027/7 "2024-06-11T21:26:34Z")

</div>

Not sure how this wouldn’t seem relevant, but if you follow what happens as part of `<.input>` it would show that it does the following eventually:

```elixir
<.error :for={msg <- Enum.map(@form[:gender].errors, &translate_error(&1)}><%= msg %></.error>

```