Packages
moon
2.72.4
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/hint.ex
defmodule Moon.Design.Form.Field.Hint do
@moduledoc false
use Moon.StatelessComponent
@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 "Hint text when default slot is not given"
prop(title, :string)
@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",
@class
])}
>
<#slot><p>{@title}</p></#slot>
</div>
"""
end
end