Packages
moon
2.89.0
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/label.ex
defmodule Moon.Design.Form.Field.Label do
@moduledoc false
use Moon.StatelessComponent
@doc "Id attribute for HTML tag"
prop(id, :string)
@doc "Data-testid attribute for HTML tag"
prop(testid, :string)
@doc "Additional Tailwind classes"
prop(class, :css_class)
@doc "Additional attributes"
prop(attrs, :map, default: %{})
@doc "Field, Surface-style"
prop(field, :atom)
@doc "Form, Surface-style"
prop(form, :any)
@doc "Atom or changeset to inform the form data"
prop(for, :string)
@doc "Common moon size property"
prop(size, :string, values!: ~w(sm md lg xl), default: "md")
@doc "Label for input field"
prop(title, :string)
@doc "Whether label has disabled state"
prop(disabled, :boolean, default: false)
@doc "Whether label is on side of input field"
prop(is_horizontal, :boolean, from_context: :is_horizontal)
@doc "On click event for the label"
prop(on_click, :event)
@doc "Value of the input"
prop(value, :string)
@doc "Default slot"
slot(default)
def render(assigns) do
~F"""
<Surface.Components.Form.Label
{=@field}
{=@form}
class={merge([
[
"flex gap-2 cursor-pointer whitespace-nowrap pb-2 items-center leading-normal",
(@size == "sm" && "text-moon-14") || "text-moon-16",
"text-bulma opacity-60 cursor-not-allowed": @disabled,
"font-medium pb-0 align-center": @is_horizontal
],
@class
])}
opts={Map.merge(
%{
for: @for,
id: @id,
"data-testid": @testid,
"phx-click": @on_click,
"phx-value-value": @value
},
@attrs
)}
>
<#slot>{@title}</#slot>
</Surface.Components.Form.Label>
"""
end
end