ModelSelector

Dropdown selector for AI models. Shows the selected model with an optional badge, and opens a dropdown with descriptions on click.

ModelSelector

Selected: claude-4

Import

tsx

import { ModelSelector } from "@arc-lo/ui";

Basic usage

tsx

const models = [
  { id: "claude-4", name: "Claude 4 Opus", badge: "New", description: "Most capable" },
  { id: "claude-3.5-sonnet", name: "Claude 3.5 Sonnet", description: "Balanced" },
  { id: "claude-3.5-haiku", name: "Claude 3.5 Haiku", badge: "Fast", description: "Fastest" },
];

<ModelSelector
  models={models}
  value={selectedModel}
  onChange={setSelectedModel}
/>

Model object

Prop	Type	Default	Description
`id`	`string`	—	Unique model identifier (required)
`name`	`string`	—	Display name (required)
`description`	`string`	—	Short description shown in dropdown
`badge`	`string`	—	Badge text (e.g. "New", "Fast")

Props

Prop	Type	Default	Description
`models`	`ModelOption[]`	—	Array of available models (required)
`value`	`string`	—	Currently selected model id (required)
`onChange`	`(modelId: string) => void`	—	Called when user selects a model (required)