Renders an card for wrapping form fields. May be used to recreate the look of an Backpex edit view.

Examples

<.form :let={f} for={@form} id="edit-form" phx-change="validate" phx-submit="submit">
  <.edit_card>
    <:panel label="Names">
      <.input field={f[:first_name]} type="text" />
      <.input field={f[:last_name]} type="text" />
    </:panel>

    <:actions>
      <button>Save</button>
    </:action>
  </.edit_card>
</.form>

Slots

• panel - a panel section. Accepts attributes:
  • class (:string) - optional class to be added to the wrapping panel element.
  • label (:string) - optional label to be displayed as a headline for the panel.
• actions - actions like a save or cancel button.

Renders an info block to indicate that no items are found.

Attributes

• socket (:any) (required)
• live_resource (:atom) (required) - live resource module.
• params (:map) (required) - query params.
• singular_name (:string) - singular name of the resource. Defaults to nil.
• query_options (:map) - query options. Defaults to %{}.
• create_button_label (:string) (required) - label of the create button.
• backpex_context (:map) - assigns passed to callbacks, see the :context_assigns option of Backpex.LiveResource. Defaults to nil.

Renders an active filter badge with its value and a clear button.

This component displays applied filters as visual badges that show both the filter label and its current value. Each badge includes a clear button (×) that allows users to remove individual filters.

Examples

<.filter_badge
  filter_name="status"
  label="Status"
  live_resource={MyApp.UserLive}
>
  Active
</.filter_badge>

Attributes

• live_resource (:any) - live resource module. Defaults to nil.
• clear_event (:string) - event triggered when the clear button is clicked. Defaults to "clear-filter".
• filter_name (:string) (required) - unique identifier for the filter being displayed.
• label (:string) (required) - human-readable filter name displayed on the badge.

Slots

• inner_block (required) - rendered filter value content (typically from filter module's render/1 function).

Renders a dropdown button that typically contains filter forms for the resource index.

It provides the main filter interface with a button that shows a funnel icon and a "Filters" label. When clicked, it opens a dropdown containing all available filter forms. The button displays a badge with the count of active filters when any filters are applied.

Examples

<.filter_dropdown filter_count={@filter_count}>
  <.form :let={f} for={@form} id="filter-form" phx-change="change-filter" class="space-y-5">
    <.filter_form_field filter_name={:status} label="Status" show_clear_button={@filter_opts[:status]}>
      <.input type="select" prompt="Select status..." options={@status_options} />
    </.filter_form_field>
  </.form>
</.filter_dropdown>

Attributes

• live_resource (:any) - live resource module. Defaults to nil.
• filter_count (:integer) - number of currently active filters (shows as badge when > 0).

Slots

• inner_block (required) - filter forms content.

Renders a filter field container with label, form inputs, and optional clear button. Providing a structured layout for individual filter controls within the filter menu.

Typically used within .filter_forms/1 to render each individual filter in the filter dropdown. The form inputs are provided via the inner_block slot, while preset buttons are provided via the presets slot.

Examples

<.filter_form_field
  filter_name={:status}
  label="Status"
  show_clear_button={@has_status_filter}
>
  <.input type="select" field={@form[:status]} options={@status_options} />
  <:presets>
    <.filter_presets
      filter_name={:status}
      presets={[
        %{label: "Active", values: fn -> "active" end},
        %{label: "Inactive", values: fn -> "inactive" end}
      ]}
    />
  </:presets>
</.filter_form_field>

Attributes

• live_resource (:any) - live resource module. Defaults to nil.
• clear_event (:string) - event name triggered when clearing the filter. Defaults to "clear-filter".
• filter_name (:string) (required) - unique identifier for the filter field.
• label (:string) (required) - human-readable label displayed above the filter.
• show_clear_button (:boolean) (required) - whether to show the clear button (typically when filter has a value).

Slots

• inner_block (required) - filter form inputs (selects, text inputs, etc.).
• presets - optional preset buttons for common filter values.

Renders form with a search field. Emits the simple-search-input event on change.

Attributes

• searchable_fields (:list) - The fields that can be searched. Here only used to hide the component when empty. Defaults to [].
• full_text_search (:string) - full text search column name. Defaults to nil.
• value (:string) (required) - value binding for the search input.
• placeholder (:string) (required) - placeholder for the search input.

Renders an inlined field.

Attributes

• id (:string) (required)
• hide_label (:boolean) - whether to hide the label (left column). Defaults to false.
• name (:string) (required) - name / key of the item field.
• item (:map) (required) - the item which provides the value to be rendered.
• fields (:list) (required) - list of all fields provided by the resource configuration.

Renders a link to change the order direction for a given column.

Attributes

• socket (:map) (required)
• live_resource (:any) (required) - module of the live resource.
• params (:string) (required) - query parameters.
• query_options (:map) (required) - query options.
• label (:string) (required) - label to be displayed on the link.
• name (:atom) (required) - name of the column the link should change order for.

Renders pagination buttons. The page_path function receives a page number and returns the path to that page. The component uses the path as is, so page_path must encode user input in it, for example with Plug.Conn.Query.encode/1.

Example

<.pagination
  page_path={&("/admin/posts?" <> Plug.Conn.Query.encode(%{search: @search, page: &1}))}
  current_page={@page}
  total_pages={@total_pages}
/>

Attributes

• current_page (:integer) (required) - current page number.
• total_pages (:integer) (required) - number of total pages.
• page_path ({:fun, 1}) (required) - function that receives a page number and returns its path.
• next_page_label (:string) - Defaults to "Next page".
• previous_page_label (:string) - Defaults to "Previous page".

Renders pagination info about the current page.

Attributes

• total (:integer) (required) - total number of items.
• query_options (:map) (required) - query options.
• live_resource (:atom) - the live resource module. Defaults to nil.

Renders a button group with create and resource action buttons.

Attributes

• socket (:any) (required)
• live_resource (:any) (required) - module of the live resource.
• params (:string) (required) - query parameters.
• query_options (:map) - query options. Defaults to %{}.
• resource_actions (:list) - list of all resource actions provided by the resource configuration. Defaults to [].
• singular_name (:string) - singular name of the resource. Defaults to nil.
• create_button_label (:string) (required) - label of the create button.
• item_actions (:list) - list of item actions. Defaults to [].
• selected_items (:list) - list of selected items. Defaults to [].
• backpex_context (:map) - assigns passed to callbacks, see the :context_assigns option of Backpex.LiveResource. Defaults to nil.

Renders the field of the given resource.

Attributes

• name (:string) (required) - name / key of the item field.
• item (:map) (required) - the item which provides the value to be rendered.
• fields (:list) (required) - list of all fields provided by the resource configuration.
• live_resource (:atom) - module of the live resource.
• field_index_assigns (:map) - assigns of each field loaded for all items.
• index_edit (:map) - inline edit of the field that the index view could not save. Defaults to nil.
• backpex_context (:map) - assigns passed to callbacks, see the :context_assigns option of Backpex.LiveResource.

Renders the input fields for filters and search.

Attributes

• live_resource (:any) (required) - module of the live resource.
• searchable_fields (:list) - The fields that can be searched. Here only used to hide the component when empty. Defaults to [].
• query_options (:map) - query options. Defaults to %{}.
• search_placeholder (:string) (required) - placeholder for the search input.
• filters (:list) - list of active filters. Defaults to [].
• filter_values (:map) - validated filter values. Defaults to %{}.
• filter_form (:any) - form backed by the filter validation changeset. Defaults to nil.
• metrics (:list) - list of metrics. Defaults to [].
• metric_visibility (:map) - visibility of the metrics per live resource. Defaults to %{}.
• backpex_context (:map) - assigns passed to callbacks, see the :context_assigns option of Backpex.LiveResource. Defaults to nil.

Renders a resource form field.

Attributes

• name (:string) (required) - name / key of the item field.
• form (:map) (required) - form that will be used by the form field.
• hide_label (:boolean) - whether to hide the label (left column). Defaults to false.
• repo (:any) - ecto repo.
• uploads (:map) - map that contains upload information. Defaults to %{}.
• fields (:list) (required) - list of all fields provided by the resource configuration.

Renders the main resource index content.

Attributes

• socket (:any) (required)
• live_resource (:any) (required) - module of the live resource.
• params (:string) (required) - query parameters.
• query_options (:map) - query options. Defaults to %{}.
• total_pages (:integer) - amount of total pages. Defaults to 1.
• resource_actions (:list) - list of all resource actions provided by the resource configuration. Defaults to [].
• singular_name (:string) - singular name of the resource. Defaults to nil.
• orderable_fields (:list) - list of orderable fields. Defaults to [].
• items (:list) - items that will be displayed in the table. Defaults to [].
• fields (:list) - list of fields to be displayed in the table on index view. Defaults to [].
• item_count (:integer) (required) - amount of items matching the current query.
• filters_changed (:boolean) - whether the filters differ from their defaults. Defaults to false.
• per_page_options (:list) (required) - options of the page size select.
• create_button_label (:string) (required) - label of the create button in the empty state.
• active_fields (:list) (required) - list of active fields.
• selected_items (:list) (required) - list of selected items.
• select_all (:boolean) - whether all items are selected. Defaults to false.
• item_actions (:list) - list of item actions. Defaults to [].
• field_index_assigns (:map) - assigns of each field loaded for all items. Defaults to %{}.
• index_edits (:map) - inline edits of the index view that could not be saved. Defaults to %{}.
• backpex_context (:map) - assigns passed to callbacks, see the :context_assigns option of Backpex.LiveResource. Defaults to nil.

Renders a resource table.

Attributes

• socket (:any) (required)
• live_resource (:any) (required) - module of the live resource.
• params (:string) (required) - query parameters.
• query_options (:map) - query options. Defaults to %{}.
• fields (:list) (required) - list of fields to be displayed in the table on index view.
• orderable_fields (:list) - list of orderable fields. Defaults to [].
• searchable_fields (:list) - list of searchable fields. Defaults to [].
• items (:list) - items that will be displayed in the table. Defaults to [].
• active_fields (:list) (required) - list of active fields.
• selected_items (:list) (required) - list of selected items.
• select_all (:boolean) - whether all items are selected. Defaults to false.
• item_actions (:list) - list of item actions. Defaults to [].
• field_index_assigns (:map) - assigns of each field loaded for all items. Defaults to %{}.
• index_edits (:map) - inline edits of the index view that could not be saved. Defaults to %{}.
• backpex_context (:map) - assigns passed to callbacks, see the :context_assigns option of Backpex.LiveResource. Defaults to nil.

Renders the metrics area for the current resource.

Attributes

• metrics (:list) - list of metrics to be displayed. Defaults to [].
• metric_visibility (:map) (required) - visibility of the metrics per live resource.
• live_resource (:atom) (required) - module of the live resource.

Renders a show card.

Attributes

• socket (:any) (required)
• live_resource (:any) (required) - module of the live resource.
• params (:string) (required) - query parameters.
• item (:map) (required) - item that will be rendered on the card.
• fields (:list) (required) - list of fields to be displayed on the card.
• panels (:list) - list of panels as {name, label}. Defaults to [].
• backpex_context (:map) - assigns passed to callbacks, see the :context_assigns option of Backpex.LiveResource. Defaults to nil.

Renders a select per page button.

Attributes

• live_resource (:atom) - The LiveResource module. Defaults to nil.
• options (:list) (required) - A list of per page options.
• query_options (:map) - The query options. Defaults to %{}.
• class (:string) - Extra class to be added to the select. Defaults to "".

Renders a show panel.

Attributes

• panel_fields (:list) (required) - list of fields to be rendered in the panel.
• class (:string) - extra class to be added. Defaults to "".
• label (:any) - optional label for the panel. Defaults to nil.
• item (:map) (required) - item that will be rendered in the panel.
• fields (:list) (required) - list of all fields provided by the resource configuration.
• live_resource (:atom) (required) - module of the live resource.
• backpex_context (:map) - assigns passed to callbacks, see the :context_assigns option of Backpex.LiveResource. Defaults to nil.

Renders the toggle columns dropdown.

Attributes

• active_fields (:list) (required) - list of active fields.
• live_resource (:atom) (required) - the live resource.
• class (:string) - additional class to be added to the component. Defaults to "".

Renders the toggle columns inputs.

Attributes

• active_fields (:list) (required) - list of active fields to be displayed.