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

View Source

Compact form input components for PhoenixDuskmoon UI.

This module provides compact input components that combine the label and input in a more condensed layout, useful for forms with limited space or when a more streamlined appearance is desired.

Examples

<.dm_compact_input field={@form[:email]} type="email" label="Email" />
<.dm_compact_input name="username" label="Username" value="john" />
<.dm_compact_input type="select" name="country" label="Country" options={[{"USA", "us"}, {"Canada", "ca"}]} />

Summary

Functions

dm_compact_input(assigns)

Renders a compact input with label and error messages.

Functions

dm_compact_input(assigns)

Renders a compact 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

Only input and select are supported.

Examples

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

Attributes

  • field_class (:any) - Defaults to nil.
  • id (:any) - Defaults to nil.
  • class (:any) - Defaults to nil.
  • name (:any)
  • label (:string) - Defaults to nil.
  • value (:any)
  • type (:string) - Defaults to "text". Must be one of "color", "date", "datetime-local", "email", "file", "month", "number", "password", "search", "select", "tel", "text", "time", "url", or "week".
  • 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