ProviderPicker

Provider and model selection compound component.

import { ProviderPicker } from "@arlopass/react-ui";

---

Parts

Name	Element	Purpose
ProviderPicker.Root	div	Manages provider/model selection state. Reads from useProviders when uncontrolled.
ProviderPicker.ProviderSelect	select	Dropdown for choosing an AI provider.
ProviderPicker.ModelSelect	select	Dropdown for choosing a model from the selected provider.
ProviderPicker.SubmitButton	button	Confirms the selected provider/model pair.

---

Uncontrolled usage

Inside a <ArlopassProvider>, ProviderPicker.Root automatically reads from useProviders. No props needed.

import { ArlopassProvider } from "@arlopass/react";
import { ProviderPicker } from "@arlopass/react-ui";

function Picker() {
  return (
    <ArlopassProvider>
      <ProviderPicker.Root>
        <ProviderPicker.ProviderSelect />
        <ProviderPicker.ModelSelect />
        <ProviderPicker.SubmitButton>Connect</ProviderPicker.SubmitButton>
      </ProviderPicker.Root>
    </ArlopassProvider>
  );
}

---

Controlled usage

Pass props to take full control over the provider list and selection callbacks.

import { useProviders } from "@arlopass/react";
import { ProviderPicker } from "@arlopass/react-ui";

function ControlledPicker() {
  const { providers, selectedProvider, selectProvider, isLoading, error } =
    useProviders();

  return (
    <ProviderPicker.Root
      providers={providers}
      selectedProvider={selectedProvider}
      isLoading={isLoading}
      error={error}
      onProviderChange={(id) => console.log("provider:", id)}
      onModelChange={(id) => console.log("model:", id)}
      onSelect={(providerId, modelId) =>
        selectProvider({ providerId, modelId })
      }
    >
      <ProviderPicker.ProviderSelect />
      <ProviderPicker.ModelSelect />
      <ProviderPicker.SubmitButton>Select</ProviderPicker.SubmitButton>
    </ProviderPicker.Root>
  );
}

ProviderPicker.Root — controlled props

---

Data attributes