diff --git a/lib/moon/components/error_tag.ex b/lib/moon/components/error_tag.ex
new file mode 100644
index 000000000..26e437132
--- /dev/null
+++ b/lib/moon/components/error_tag.ex
@@ -0,0 +1,15 @@
+defmodule Moon.Components.ErrorTag do
+ @moduledoc false
+
+ use Moon.StatelessComponent
+
+ prop(field, :any)
+
+ def render(assigns) do
+ ~F"""
+
+ """
+ end
+end
diff --git a/lib/moon/components/select.ex b/lib/moon/components/select.ex
index 6dbd4841c..3cba29ca4 100644
--- a/lib/moon/components/select.ex
+++ b/lib/moon/components/select.ex
@@ -4,6 +4,7 @@ defmodule Moon.Components.Select do
use Moon.StatelessComponent
alias Moon.Components.Label
+ alias Moon.Components.ErrorTag
prop field, :any
prop label, :string
@@ -34,15 +35,17 @@ defmodule Moon.Components.Select do
select = ~F"""
+
"""
~F"""
diff --git a/lib/moon/components/text_input.ex b/lib/moon/components/text_input.ex
index 04c2b5b41..576bf0232 100644
--- a/lib/moon/components/text_input.ex
+++ b/lib/moon/components/text_input.ex
@@ -3,6 +3,7 @@ defmodule Moon.Components.TextInput do
use Moon.StatelessComponent
alias Moon.Components.Label
+ alias Moon.Components.ErrorTag
prop field, :any
prop label, :string
@@ -30,8 +31,8 @@ defmodule Moon.Components.TextInput do
prop disabled, :boolean
prop required, :boolean
prop class, :string
- prop on_focus, :event
- prop on_blur, :event
+ prop focus, :event
+ prop blur, :event
prop without_design, :boolean
prop background_color, :string, values: Moon.colors(), default: "goku-100"
prop size, :string, values: ["medium", "large"], default: "large"
@@ -68,7 +69,7 @@ defmodule Moon.Components.TextInput do
"#{@class}": true,
"bg-#{@background_color}": true
}
- field={String.to_atom("#{@field}")}
+ field={@field && String.to_atom("#{@field}")}
opts={
placeholder: @placeholder,
disabled: @disabled,
@@ -76,9 +77,10 @@ defmodule Moon.Components.TextInput do
type: @type
}
value={@value}
- focus={@on_focus}
- blur={@on_blur}
+ focus={@focus}
+ blur={@blur}
/>
+
"""
diff --git a/lib/moon_web/pages/example_pages/shared/top_menu/search.ex b/lib/moon_web/pages/example_pages/shared/top_menu/search.ex
index 2247e7250..817d11754 100644
--- a/lib/moon_web/pages/example_pages/shared/top_menu/search.ex
+++ b/lib/moon_web/pages/example_pages/shared/top_menu/search.ex
@@ -28,7 +28,7 @@ defmodule MoonWeb.Pages.ExamplePages.Shared.TopMenu.Search do
placeholder="Search for dashboard, segments and more"
field={:search_text}
value={@search_map.search_text}
- on_focus="activate_search"
+ focus="activate_search"
class="bg-goku-100 h-10 border-transparent"
>
<:left_icon>
diff --git a/lib/moon_web/pages/tutorials/add_data_using_form.ex b/lib/moon_web/pages/tutorials/add_data_using_form.ex
index 171e3a7cb..e71bffe4c 100644
--- a/lib/moon_web/pages/tutorials/add_data_using_form.ex
+++ b/lib/moon_web/pages/tutorials/add_data_using_form.ex
@@ -84,12 +84,28 @@ defmodule MoonWeb.Pages.Tutorials.AddDataUsingForm do
<:example>
+