PhoenixDuskmoon.Component.Form.Input (PhoenixDuskmoon v7.2.1)

View Source

Form input components for PhoenixDuskmoon UI.

This module provides a comprehensive set of input components that support various input types including text, checkbox, select, textarea, file, and specialized inputs like date pickers, color pickers, range sliders, and more.

Examples

<.dm_input field={@form[:email]} type="email" label="Email" />
<.dm_input name="username" label="Username" value="john" />
<.dm_input type="select" name="country" options={[{"USA", "us"}, {"Canada", "ca"}]} />
<.dm_input type="rating" name="rating" max={5} value={3} />
<.dm_input type="password_strength" name="password" label="Password" />

Summary

Functions

Renders an input with label and error messages.

Functions

dm_input(assigns)

Renders an input with label and error messages.

A Phoenix.HTML.FormField may be passed as argument, which is used to retrieve the input name, id, and values. Otherwise all attributes may be passed explicitly.

Types

This function accepts all HTML input types, considering that:

  • You may also set type="select" to render a <select> tag

  • type="checkbox" is used exclusively to render boolean values

  • For live file uploads, see Phoenix.Component.live_file_input/1

See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input for more information.

Examples

<.dm_input field={@form[:email]} type="email" />
<.dm_input name="my-input" errors={["oh no!"]} />

Attributes

  • field_class (:any) - Defaults to nil.
  • id (:any) - Defaults to nil.
  • class (:any) - Defaults to nil.
  • classic (:boolean) - Defaults to false.
  • name (:any)
  • label (:string) - Defaults to nil.
  • value (:any)
  • color (:string) - the color variant of the input (primary, secondary, accent, info, success, warning, error). Defaults to nil.
  • size (:string) - the size of the input (xs, sm, lg). Defaults to nil.
  • type (:string) - Defaults to "text". Must be one of "checkbox", "color", "date", "datetime-local", "email", "file", "hidden", "month", "number", "password", "range", "radio", "search", "select", "tel", "text", "textarea", "time", "url", "week", "checkbox_group", "radio_group", "toggle", "range_slider", "rating", "datepicker", "timepicker", "color_picker", "switch", "search_with_suggestions", "file_upload", "rich_text", "tags", "slider_range", or "password_strength".
  • field (Phoenix.HTML.FormField) - a form field struct retrieved from the form, for example: @form[:email].
  • errors (:list) - Defaults to [].
  • checked (:boolean) - the checked flag for checkbox inputs.
  • prompt (:string) - the prompt for select inputs. Defaults to nil.
  • options (:list) - the options to pass to Phoenix.HTML.Form.options_for_select/2.
  • multiple (:boolean) - the multiple flag for select inputs. Defaults to false.
  • Global attributes are accepted. Supports all globals plus: ["accept", "autocomplete", "capture", "cols", "disabled", "form", "list", "max", "maxlength", "min", "minlength", "multiple", "pattern", "placeholder", "readonly", "required", "rows", "size", "step"].

Slots

  • inner_block