Packages
moon
2.76.5
2.90.5
retired
2.90.4
2.90.3
2.90.2
2.90.1
2.90.0
2.89.4
2.89.1
2.89.0
2.88.0
2.87.11
2.87.10
2.87.9
2.87.8
2.87.7
2.87.6
2.87.5
2.87.4
2.87.3
2.87.2
2.87.1
2.87.0
2.86.1
2.86.0
2.85.1
2.85.0
2.84.0
2.83.0
2.82.0
2.81.4
2.81.3
2.81.2
2.81.1
2.81.0
2.80.2
2.80.1
2.80.0
2.79.13
2.79.12
2.79.11
2.79.10
2.79.9
2.79.8
2.79.7
2.79.6
2.79.5
2.79.4
2.79.3
2.79.2
2.79.1
2.79.0
2.78.4
2.78.3
2.78.2
2.78.1
2.78.0
2.77.0
2.76.5
2.76.4
2.76.3
2.76.2
2.76.1
2.76.0
2.75.0
2.74.1
2.74.0
2.73.8
2.73.7
2.73.6
2.73.5
2.73.4
2.73.3
2.73.2
2.73.1
2.73.0
2.72.5
2.72.4
2.72.3
2.72.2
2.72.1
2.72.0
2.71.1
2.71.0
2.70.0
2.69.2
2.69.1
2.69.0
2.68.11
2.68.10
Components-based design system written in elixir
Current section
Files
Jump to
Current section
Files
lib/moon/design/form/field/error.ex
defmodule Moon.Design.Form.Field.Error do
@moduledoc false
use Moon.StatelessComponent
alias Moon.Icon
@doc "Data-testid attribute for HTML tag"
prop(testid, :string)
@doc "Id attribute for HTML tag"
prop(id, :string)
@doc "Additional Tailwind classes"
prop(class, :css_class)
@doc "Whether error icon is shown"
prop(has_error_icon, :boolean, default: false)
@doc "Whether label is on side of input field"
prop(is_horizontal, :boolean, default: false)
@doc "Default slot"
slot(default)
def render(assigns) do
~F"""
<div
data-testid={@testid}
{=@id}
class={merge([
[
"flex gap-1 items-center mt-2 text-moon-12 [&_svg]:text-moon-16 text-chichi",
"col-end-3": @is_horizontal
],
@class
])}
role="alert"
>
<#slot>
<Icon name="generic_info" :if={@has_error_icon} />
</#slot>
<Surface.Components.Form.ErrorTag />
</div>
"""
end
end