ModelPicker

A model from the project's catalogue: provider mark, name and id, grouped by provider. The start of a comparison column's header.

View source

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
A quiet button (ghost) or a filled one (default).
aria-label
string
The picker's accessible name ("Model" by default).
defaultValue
string | null
The chosen model on first render.
disabled
boolean
Turns it off: it can't be used, and it looks dimmed.
groupByProvider
boolean
Groups the list by provider (true by default when there are several).
onValueChange
((value: string) => void)
Called with the chosen model.
options
ModelPickerOption[]
The models to choose from.
placeholder
string
Text shown while there is no value.
size
"md" | "sm" = sm
The button's height.
value
string | null
The chosen model, when you control it.