Packages
moon
2.84.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/input.ex
defmodule Moon.Design.Form.Input do
@moduledoc false
use Moon.StatelessComponent
import Phoenix.HTML.Form
import Moon.Helpers.Form
@doc "Name of the field, usually should be taken from context"
prop(field, :atom, from_context: {Surface.Components.Form.Field, :field})
@doc "Form info, usually should be taken from context"
prop(form, :form, from_context: {Surface.Components.Form, :form})
@doc "Common moon size property"
prop(size, :string, values!: ["sm", "md", "lg"], default: "md")
@doc "Some additional styling will be set to indicate the field is invalid. Generally should be set by Form.Field or Form.InsetField component"
prop(error, :boolean, from_context: :error)
@doc "HTML5 type of the input, please don't use checkbox or radio here"
prop(type, :string,
values!: [
"date",
"month",
"datetime-local",
"email",
"number",
"password",
"search",
"tel",
"text",
"time",
"url"
],
default: "text"
)
@doc "Text to be set as a HTML placeholder attribute - when input is empty"
prop(placeholder, :string, default: " ")
@doc "Additional classes for the <input> tag"
prop(class, :css_class, from_context: :class)
@doc "Additional classes for the <input> tag in case of floating label or Group"
prop(field_class, :css_class, from_context: :field_class)
@doc "Value of the input, don't use it inside the forms"
prop(value, :string)
@doc "Id to be given to the input tag"
prop(id, :string)
@doc "Data-testid attribute value"
prop(testid, :string)
@doc "HTML disabled attribute for the input & some additional classes. Generally should be set by Form.Field or Form.InsetField component"
prop(disabled, :boolean, from_context: :disabled)
@doc "Readonly - some additional classes and behaviour. Generally should be set by Form.Field or Form.InsetField component"
prop(readonly, :boolean, from_context: :readonly)
@doc "Autocomplete HTML attribute for the input, use \"off\" to disable"
prop(autocomplete, :string)
@doc "Keyword | Map of additional attributes for the input"
prop(opts, :any, default: %{})
@doc "On change event for the input - don't use it inside phoenix forms"
prop(on_change, :event)
@doc "On keyup event for the input"
prop(on_keyup, :event)
@doc "On focus event for the input"
prop(on_focus, :event)
@doc "On blur event for the input"
prop(on_blur, :event)
def render(assigns) do
~F"""
<input
class={merge(
input_classes(assigns) ++
input_size_classes(assigns) ++ [@field_class, get_config(:default_class), @class]
)}
{=@type}
{=@placeholder}
value={@value || input_value(@form, @field)}
id={@id || input_id(@form, @field)}
name={input_name(@form, @field)}
{=@disabled}
{=@readonly}
error={@error || has_error(@form, @field)}
data-testid={@testid}
{=@autocomplete}
{...@opts}
:on-change={@on_change}
:on-keyup={@on_keyup}
:on-focus={@on_focus}
:on-blur={@on_blur}
/>
"""
end
end