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.
• variant (:string) - Defaults to "default".
• Global attributes are accepted. Supports all globals plus: ["disabled", "form", "name", "value"].

Slots

• inner_block (required)

Generates a generic error message.

Slots

• inner_block (required)

Renders a flash message.

Attributes

• flash (:map) (required)
• kind (:atom) (required)

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". Must be one of "checkbox", "color", "date", "datetime-local", "email", "file", "month", "number", "password", "radio", "range", "search", "select", "multiselect", "tel", "text", "textarea", "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"].

Renders a label.

Attributes

• for (:string) - Defaults to nil.

Slots

• inner_block (required)

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: []}.

Slots

• inner_block (required)

Renders a loading spinner.

Examples

<.spinner />
<.spinner size="32" />
<.spinner class="text-blue-500" />

Attributes

• size (:string) - Defaults to "24".
• class (:string) - Defaults to "".
• Global attributes are accepted.

Renders a table with striped rows.

Examples

<.table id="results" rows={@results}>
  <:col :let={row} label="id">{row.id}</:col>
  <:col :let={row} label="name">{row.name}</:col>
</.table>

Attributes

• id (:string) (required)
• rows (:list) (required)
• row_id (:any) - the function for generating the row id. Defaults to nil.
• row_click (:any) - the function for handling phx-click on each row. Defaults to nil.
• sticky_header (:boolean) - if true, keeps header visible while body scrolls. Defaults to false.
• row_item (:any) - the function for mapping each row before calling the :col slots. Defaults to &Function.identity/1.

Slots

• col (required) - Accepts attributes:
  • label (:string)

Renders a theme toggle button that switches between light and dark modes. Shows sun icon in dark mode (to switch to light) and moon icon in light mode (to switch to dark).

Attributes

• Global attributes are accepted.