PureAdmin.Components.Form (PureAdmin v1.1.0)

Copy Markdown View Source

Form components for Pure Admin.

Provides both low-level HTML components (input/1, select/1, textarea/1, checkbox/1, radio/1) and Phoenix-aware components (form_group/1, form_field/1, simple_form/1).

Summary

Functions

Renders a custom tri-state checkbox with Pure Admin BEM classes.

Renders a checkbox group (vertical stack).

Renders a form group wrapper with optional validation state.

Renders help/hint text below inputs.

Renders a form label.

Renders a text input with Pure Admin BEM classes.

Renders an input group (input with prepend/append elements).

Wraps an input or select with an optional clear button.

Renders a radio button with Pure Admin BEM classes.

Renders a radio button group (vertical stack).

Renders a select dropdown with Pure Admin BEM classes.

Renders a Phoenix-aware form with Pure Admin classes.

Renders a textarea with Pure Admin BEM classes.

Translates a Phoenix {msg, opts} error tuple into a plain string.

Functions

checkbox(assigns)

Renders a custom tri-state checkbox with Pure Admin BEM classes.

Accepts a Phoenix :field for automatic binding. When field is given, name, id, and checked are derived (checked when the field value is truthy — specifically true, "true", or "on"). Errors are available via the field struct but not rendered inline — place them on the enclosing form_group or form_help instead.

Examples

<.checkbox name="agree" label="I agree to the terms" />
<.checkbox name="option" label="Option A" checked size="lg" />
<.checkbox field={@form[:agree]} label="I agree to the terms" />

Attributes

  • field (Phoenix.HTML.FormField) - A Phoenix form field, e.g. @form[:agree]. When set, derives name/id/checked. Defaults to nil.
  • name (:string) - Defaults to nil.
  • id (:string) - Defaults to nil.
  • value (:string) - Defaults to "true".
  • checked (:boolean) - Defaults to false.
  • is_indeterminate (:boolean) - Indeterminate/partial state (requires PureAdminCheckbox hook). Defaults to false.
  • is_x_mark (:boolean) - X mark instead of checkmark. Defaults to false.
  • label (:string) - Plain text label. Defaults to nil.
  • size (:string) - Defaults to nil.Must be one of nil, "xs", "sm", "lg", or "xl".
  • class (:string) - Defaults to nil.
  • Global attributes are accepted. Supports all globals plus: ["disabled", "required", "form", "phx-change", "phx-click", "phx-debounce"].

Slots

  • label_content - Rich HTML label content (alternative to label attr).

checkbox_group(assigns)

Renders a checkbox group (vertical stack).

Attributes

  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

form_group(assigns)

Renders a form group wrapper with optional validation state.

Examples

<.form_group>
  <.form_label for="email">Email</.form_label>
  <.input type="email" name="email" id="email" />
</.form_group>

<.form_group validation="error" is_required>
  <.form_label for="name">Name</.form_label>
  <.input type="text" name="name" id="name" />
  <.form_help variant="error">Name is required</.form_help>
</.form_group>

Attributes

  • field (Phoenix.HTML.FormField) - A Phoenix form field. When set, validation auto-switches to "error" if the field has errors. Defaults to nil.
  • label (:string) - Shorthand for a simple text label. Defaults to nil.
  • validation (:string) - Defaults to nil.Must be one of nil, "success", "warning", or "error".
  • is_required (:boolean) - Defaults to false.
  • is_horizontal (:boolean) - Defaults to false.
  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

form_help(assigns)

Renders help/hint text below inputs.

Attributes

  • variant (:string) - Defaults to nil.Must be one of nil, "success", "warning", or "error".
  • color (:string) - Theme color (1-9). Defaults to nil. Must be one of nil, "1", "2", "3", "4", "5", "6", "7", "8", or "9".
  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

form_label(assigns)

Renders a form label.

Attributes

  • for (:string) - Defaults to nil.
  • is_required (:boolean) - Adds asterisk indicator. Defaults to false.
  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

input(assigns)

Renders a text input with Pure Admin BEM classes.

Accepts either manual name/value attrs or a Phoenix :field for automatic binding. When field is given, name, id, and value are derived from it (explicit attrs win), and field errors automatically flip the input into the error state plus render a form_help below it (opt out with show_errors={false}).

Examples

<.input type="text" name="username" placeholder="Enter username" />
<.input type="email" size="lg" validation="error" />
<.input field={@form[:email]} type="email" />

Attributes

  • field (Phoenix.HTML.FormField) - A Phoenix form field, e.g. @form[:email]. When set, derives name/id/value and errors. Defaults to nil.
  • type (:string) - Defaults to "text".
  • name (:string) - Defaults to nil.
  • id (:string) - Defaults to nil.
  • value (:any) - Defaults to nil.
  • errors (:list) - Raw {msg, opts} tuples or strings. Defaults to field errors when :field is set. Defaults to nil.
  • show_errors (:boolean) - Render field errors as a form_help below the input. No effect without :field. Defaults to true.
  • size (:string) - Defaults to nil.Must be one of nil, "xs", "sm", "lg", or "xl".
  • validation (:string) - Defaults to nil.Must be one of nil, "success", "warning", or "error".
  • is_error (:boolean) - Shorthand for validation="error". Defaults to false.
  • is_success (:boolean) - Shorthand for validation="success". Defaults to false.
  • color (:string) - Theme color (1-9). Defaults to nil. Must be one of nil, "1", "2", "3", "4", "5", "6", "7", "8", or "9".
  • class (:string) - Defaults to nil.
  • Global attributes are accepted. Supports all globals plus: ["placeholder", "disabled", "readonly", "required", "autocomplete", "autofocus", "min", "max", "step", "pattern", "maxlength", "minlength", "form", "phx-change", "phx-blur", "phx-focus", "phx-debounce"].

input_group(assigns)

Renders an input group (input with prepend/append elements).

Examples

<.input_group>
  <:prepend>@</:prepend>
  <.input type="text" name="username" placeholder="Username" />
</.input_group>

<.input_group>
  <.input type="text" name="search" placeholder="Search..." />
  <:button>
    <.button variant="primary">Search</.button>
  </:button>
</.input_group>

Attributes

  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • prepend - Left addon text.
  • append - Right addon text.
  • button - Button addon.
  • inner_block (required)

input_wrapper(assigns)

Wraps an input or select with an optional clear button.

The clear button emits a phx-click event when clicked (defaults to the on_clear attr value) so the parent LiveView can reset the field.

Examples

<.input_wrapper>
  <.input type="text" placeholder="Search..." />
</.input_wrapper>

<.input_wrapper on_clear="clear-search">
  <.input type="text" placeholder="Search..." />
</.input_wrapper>

<.input_wrapper has_clear={false}>
  <.input type="text" placeholder="No clear button" />
</.input_wrapper>

Attributes

  • has_clear (:boolean) - Show the clear (×) button. Defaults to true.
  • on_clear (:string) - phx-click event for the clear button. Defaults to nil.
  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

radio(assigns)

Renders a radio button with Pure Admin BEM classes.

Accepts a Phoenix :field for automatic binding. checked is derived from to_string(field.value) == value. Render a set of radios over the same @form[:role] field by giving each a distinct value.

Examples

<.radio name="plan" value="basic" label="Basic Plan" />
<.radio field={@form[:plan]} value="basic" label="Basic Plan" />
<.radio field={@form[:plan]} value="pro" label="Pro Plan" />

Attributes

  • field (Phoenix.HTML.FormField) - A Phoenix form field, e.g. @form[:plan]. When set, derives name/checked. Defaults to nil.
  • name (:string) - Defaults to nil.
  • id (:string) - Defaults to nil.
  • value (:string) (required)
  • checked (:boolean) - Defaults to false.
  • label (:string) - Defaults to nil.
  • class (:string) - Defaults to nil.
  • Global attributes are accepted. Supports all globals plus: ["disabled", "required", "form", "phx-change", "phx-click", "phx-debounce"].

radio_group(assigns)

Renders a radio button group (vertical stack).

Attributes

  • class (:string) - Defaults to nil.
  • Global attributes are accepted.

Slots

  • inner_block (required)

select(assigns)

Renders a select dropdown with Pure Admin BEM classes.

Accepts a Phoenix :field for automatic binding, same as input/1.

Examples

<.select name="country" options={[{"US", "United States"}, {"UK", "United Kingdom"}]} />
<.select field={@form[:department]} options={["Engineering", "Sales"]} />

Attributes

  • field (Phoenix.HTML.FormField) - A Phoenix form field, e.g. @form[:role]. When set, derives name/id/value and errors. Defaults to nil.
  • name (:string) - Defaults to nil.
  • id (:string) - Defaults to nil.
  • value (:any) - Defaults to nil.
  • errors (:list) - Defaults to nil.
  • show_errors (:boolean) - Defaults to true.
  • options (:list) - List of {value, label} tuples or strings. Defaults to [].
  • prompt (:string) - Placeholder option. Defaults to nil.
  • size (:string) - Defaults to nil.Must be one of nil, "xs", "sm", "lg", or "xl".
  • validation (:string) - Defaults to nil.Must be one of nil, "success", "warning", or "error".
  • color (:string) - Defaults to nil.Must be one of nil, "1", "2", "3", "4", "5", "6", "7", "8", or "9".
  • class (:string) - Defaults to nil.
  • Global attributes are accepted. Supports all globals plus: ["disabled", "required", "multiple", "form", "phx-change", "phx-blur", "phx-debounce"].

simple_form(assigns)

Renders a Phoenix-aware form with Pure Admin classes.

Wraps Phoenix.Component.form/1 with Pure Admin styling.

Examples

<.simple_form for={@form} phx-change="validate" phx-submit="save">
  <.form_group is_required>
    <.form_label for="name">Name</.form_label>
    <.input type="text" name={@form[:name].name} value={@form[:name].value} />
  </.form_group>
  <:actions>
    <.button variant="primary" type="submit">Save</.button>
  </:actions>
</.simple_form>

Attributes

  • for (:any) (required) - Phoenix form struct or changeset.
  • as (:any) - Defaults to nil.
  • is_inline (:boolean) - Defaults to false.
  • class (:string) - Defaults to nil.
  • Global attributes are accepted. Supports all globals plus: ["phx-change", "phx-submit", "phx-target", "autocomplete"].

Slots

  • inner_block (required)
  • actions - Form action buttons.

textarea(assigns)

Renders a textarea with Pure Admin BEM classes.

Accepts a Phoenix :field for automatic binding, same as input/1.

Examples

<.textarea name="message" rows={4} placeholder="Enter message" />
<.textarea field={@form[:bio]} rows={4} />

Attributes

  • field (Phoenix.HTML.FormField) - A Phoenix form field, e.g. @form[:bio]. When set, derives name/id/value and errors. Defaults to nil.
  • name (:string) - Defaults to nil.
  • id (:string) - Defaults to nil.
  • value (:any) - Defaults to nil.
  • errors (:list) - Defaults to nil.
  • show_errors (:boolean) - Defaults to true.
  • size (:string) - Defaults to nil.Must be one of nil, "xs", "sm", "lg", or "xl".
  • validation (:string) - Defaults to nil.Must be one of nil, "success", "warning", or "error".
  • color (:string) - Defaults to nil.Must be one of nil, "1", "2", "3", "4", "5", "6", "7", "8", or "9".
  • class (:string) - Defaults to nil.
  • Global attributes are accepted. Supports all globals plus: ["placeholder", "disabled", "readonly", "required", "rows", "cols", "form", "phx-change", "phx-blur", "phx-debounce"].

translate_error(arg)

@spec translate_error({String.t(), keyword()}) :: String.t()

Translates a Phoenix {msg, opts} error tuple into a plain string.

Apps with Gettext-based error translation should configure their own formatter:

config :keen_pure_admin,
  error_formatter: {MyAppWeb.CoreComponents, :translate_error}

The formatter receives the raw {msg, opts} tuple and must return a string. The built-in default performs the same %{key} interpolation used by Ecto.Changeset's default error messages.