@spec back(map()) :: Phoenix.LiveView.Rendered.t()

Renders a back navigation link.

Examples

<.back navigate={~p"/posts"}>Back to posts</.back>

Attributes

• navigate (:any) (required)

Slots

• inner_block (required)

@spec button(map()) :: Phoenix.LiveView.Rendered.t()

Renders a button.

Examples

<.button>Send!</.button>
<.button phx-click="go" class="ml-2">Send!</.button>

Attributes

• type (:string) - Defaults to nil.
• class (:string) - Defaults to nil.
• Global attributes are accepted. Supports all globals plus: ["disabled", "form", "name", "value"].

Slots

• inner_block (required)

@spec error(map()) :: Phoenix.LiveView.Rendered.t()

Generates a generic error message.

Slots

• inner_block (required)

@spec flash(map()) :: Phoenix.LiveView.Rendered.t()

Renders flash notices.

Examples

<.flash kind={:info} flash={@flash} />
<.flash kind={:info} phx-mounted={show("#flash")}>Welcome Back!</.flash>

Attributes

• id (:string) - the optional id of flash container.
• flash (:map) - the map of flash messages to display. Defaults to %{}.
• title (:string) - Defaults to nil.
• kind (:atom) - used for styling and flash lookup. Must be one of :info, or :error.
• Global attributes are accepted. the arbitrary HTML attributes to add to the flash container.

Slots

• inner_block - the optional inner block that renders the flash message.

@spec flash_group(map()) :: Phoenix.LiveView.Rendered.t()

Shows the flash group with standard titles and content.

Examples

<.flash_group flash={@flash} />

Attributes

• flash (:map) (required) - the map of flash messages.
• id (:string) - the optional id of flash container. Defaults to "flash-group".

@spec header(map()) :: Phoenix.LiveView.Rendered.t()

Renders a header with title.

Attributes

• class (:string) - Defaults to nil.

Slots

• inner_block (required)
• subtitle
• actions

@spec hide_modal(Phoenix.LiveView.JS.t() | nil, binary()) :: Phoenix.LiveView.JS.t()

Hides a modal with transition animations. The modal must have a container with the given ID and child elements with IDs suffixed with "-bg" and "-container".

Examples

<button phx-click={hide_modal("confirm-modal")}>Close modal</button>

@spec icon(map()) :: Phoenix.LiveView.Rendered.t()

Renders a Heroicon.

Heroicons come in three styles – outline, solid, and mini. By default, the outline style is used, but solid and mini may be applied by using the -solid and -mini suffix.

You can customize the size and colors of the icons by setting width, height, and background color classes.

Icons are generated from the deps/heroicons directory and put in assets/css/icons.css, then esbuild compiles the app.css.

Examples

<.icon name="hero-x-mark-solid" />
<.icon name="hero-arrow-path" class="auix-icon-size-3 auix-animate-spin" />

Attributes

• name (:string) (required)
• class (:string) - Defaults to nil.

@spec input(map()) :: Phoenix.LiveView.Rendered.t()

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. Unsupported types, such as hidden and radio, are best written directly in your templates.

Examples

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

Attributes

• id (:any) - Defaults to nil.
• name (:any)
• label (:string) - Defaults to nil.
• value (:any)
• type (:string) - Defaults to "text".
• 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.
• fieldset_class (:string) - optional label class adendum. Defaults to "".
• label_class (:string) - optional label class adendum. Defaults to "".
• input_class (:string) - optional input class adendum. Defaults to "".
• option_class (:string) - optional option class adendum for select. Defaults to "".
• omit_label? (:boolean) - If true, label is not rendered at all. 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"].

@spec label(map()) :: Phoenix.LiveView.Rendered.t()

Renders a label.

Attributes

• for (:string) - Defaults to nil.
• class (:string) - class override. Defaults to nil.

Slots

• inner_block (required)

@spec list(map()) :: Phoenix.LiveView.Rendered.t()

Renders a data list.

Examples

<.list>
  <:item title="Title"><%= @post.title %></:item>
  <:item title="Views"><%= @post.views %></:item>
</.list>

Slots

• item (required) - Accepts attributes:
  • title (:string) (required)

@spec modal(map()) :: Phoenix.LiveView.Rendered.t()

Renders a modal.

Examples

<.modal id="confirm-modal">
  This is a modal.
</.modal>

JS commands may be passed to the :on_cancel to configure the closing/cancel event, for example:

<.modal id="confirm" on_cancel={JS.navigate(~p"/posts")}>
  This is another modal.
</.modal>

Attributes

• id (:string) (required)
• show (:boolean) - Defaults to false.
• on_cancel (Phoenix.LiveView.JS) - Defaults to %Phoenix.LiveView.JS{ops: []}.
• auix (:map) - Defaults to %{}.

Slots

• inner_block (required)

@spec show_modal(Phoenix.LiveView.JS.t() | nil, binary()) :: Phoenix.LiveView.JS.t()

Shows a modal with transition animations. The modal must have a container with the given ID and child elements with IDs suffixed with "-bg" and "-container".

Examples

<button phx-click={show_modal("confirm-modal")}>Open modal</button>

@spec simple_form(map()) :: Phoenix.LiveView.Rendered.t()

Renders a simple form.

Examples

<.simple_form for={@form} phx-change="validate" phx-submit="save">
  <.input field={@form[:email]} label="Email"/>
  <.input field={@form[:username]} label="Username" />
  <:actions>
    <.button>Save</.button>
  </:actions>
</.simple_form>

Attributes

• for (:any) (required) - the data structure for the form.
• as (:any) - the server side parameter to collect all input under. Defaults to nil.
• Global attributes are accepted. the arbitrary HTML attributes to apply to the form tag. Supports all globals plus: ["autocomplete", "name", "rel", "action", "enctype", "method", "novalidate", "target", "multipart"].

Slots

• inner_block (required)
• actions - the slot for form actions, such as a submit button.

@spec translate_error(tuple()) :: binary()

Translates an error message using gettext.

@spec translate_errors(
  list(),
  keyword()
) :: list()

Translates the errors for a field from a keyword list of errors.

@spec uix_hide(Phoenix.LiveView.JS.t() | nil, binary()) :: Phoenix.LiveView.JS.t()

Hides an element by adding classes for a transition animation.

Examples

<button phx-click={hide("#my-element")}>Hide</button>

@spec uix_show(Phoenix.LiveView.JS.t() | nil, binary()) :: Phoenix.LiveView.JS.t()

Shows an element by adding classes for a transition animation.

Examples

<button phx-click={show("#my-element")}>Show</button>