# `PhoenixKitWeb.Components.Core.IntegrationPicker`
[🔗](https://github.com/BeamLabEU/phoenix_kit/blob/v1.7.165/lib/phoenix_kit_web/components/core/integration_picker.ex#L1)

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

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.

# `integration_picker`

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 `""`.

---

*Consult [api-reference.md](api-reference.md) for complete listing*