ModelPicker

Ein Modell aus dem Katalog des Projekts: Anbieterzeichen, Name und ID, nach Anbieter gruppiert. Der Anfang des Kopfes einer Vergleichsspalte.

Quelltext

function Basic() {
  const [model, setModel] = useState("claude-sonnet-4-5");
  return (
    <div className="flex h-52 w-full max-w-360 items-center pl-8 hairline-b">
      <ModelPicker value={model} onValueChange={setModel} options={playgroundModels} />
    </div>
  );
}

import { ModelPicker } from "@logicplanes/kaeso-ui/playground";

Props

appearance
"ghost" | "default" = ghost
Ein leiser Button (ghost) oder ein gefüllter (default).
aria-label
string
Der zugängliche Name der Auswahl (standardmäßig „Modell“).
defaultValue
string | null
Das gewählte Modell beim ersten Rendern.
disabled
boolean
Schaltet es aus: Es lässt sich nicht verwenden und wirkt abgeblendet.
groupByProvider
boolean
Gruppiert die Liste nach Anbieter (standardmäßig an, wenn es mehrere gibt).
onValueChange
((value: string) => void)
Wird mit dem gewählten Modell aufgerufen.
options
ModelPickerOption[]
Die Modelle zur Auswahl.
placeholder
string
Text, der angezeigt wird, solange es keinen Wert gibt.
size
"md" | "sm" = sm
Die Höhe des Buttons.
value
string | null
Das gewählte Modell, bei gesteuertem Wert.