PhoenixKitWeb.Components.Core.IntegrationPicker (phoenix_kit v1.7.109)

Copy Markdown View Source

Reusable integration connection picker component.

Displays integration connections as clickable cards in a modal or inline grid. Supports single and multi-select modes, search, and provider filtering.

Examples

<%-- Single select, one provider --%>
<.integration_picker
  id="google-picker"
  connections={@all_connections}
  selected={[@selected_uuid]}
  provider="google"
  on_select="select_integration"
/>

<%-- Multi-select, all providers, with search --%>
<.integration_picker
  id="multi-picker"
  connections={@all_connections}
  selected={@selected_uuids}
  multiple={true}
  searchable={true}
  on_select="update_integrations"
/>

<%-- Single select, all providers --%>
<.integration_picker
  id="any-picker"
  connections={@all_connections}
  selected={[@selected_uuid]}
  on_select="pick_integration"
/>

The parent LiveView is responsible for loading connections via PhoenixKit.Integrations.list_connections/1 or building the list from PhoenixKit.Integrations.Providers.all/0.

Events

The component sends the on_select event with:

  • Single mode: %{"uuid" => uuid, "action" => "select" | "deselect"} — clicking an unselected card emits "select"; clicking the currently-selected card emits "deselect" so the parent can clear the binding.

  • Multi mode: %{"uuid" => uuid, "action" => "add" | "remove"} when toggled

Search is handled client-side via the IntegrationPickerSearch JS hook. Cards are filtered by their data-search-text attribute (name, account, provider). No parent LiveView handler is needed — filtering is instant and local.

Summary

Functions

integration_picker(assigns)

Renders an integration picker as a grid of cards.

Functions

integration_picker(assigns)

Renders an integration picker as a grid of cards.

Attributes

  • id - Unique element ID (required)
  • connections - List of connection maps from Integrations.list_connections/1. Each map must have :uuid, :name, :data keys, and optionally :provider (a provider definition map with :name, :icon, :key).
  • selected - List of currently selected UUIDs (default: [])
  • provider - Filter to only show connections for this provider key (optional)
  • multiple - Allow multiple selection (default: false)
  • searchable - Show search input. Accepts true / false / nil. nil (the default) means auto-detect — the search input shows when there are more than 6 connections. Explicit false suppresses it even past the threshold; explicit true forces it even at small N. Typed :any in the attr definition because Phoenix's :boolean doesn't admit nil.
  • compact - Use compact card layout (default: false)
  • on_select - Event name sent to parent on selection (required)
  • empty_url - URL for "Add Integration" link shown when no connections exist (optional)
  • class - Additional CSS classes for the wrapper (optional)

Attributes

  • id (:string) (required)
  • connections (:list) (required)
  • selected (:list) - Defaults to [].
  • provider (:string) - Defaults to nil.
  • multiple (:boolean) - Defaults to false.
  • searchable (:any) - Defaults to nil.
  • compact (:boolean) - Defaults to false.
  • on_select (:string) (required)
  • empty_url (:string) - Defaults to nil.
  • class (:string) - Defaults to "".
  • search (:string) - Defaults to "".