ModelSelector
stablev1.0.0Model comparison dropdown or inline panel for Claude model family. Each option shows capability tags, context window size, latency indicator, and cost tier badge. Supports dropdown and full panel variants.
import { ModelSelector } from "@nodus/design-system"Loading demo…
Props
| Prop | Type | Default | Description |
|---|---|---|---|
optionsreq | ModelOption[] | — | Array of model options with capability metadata. |
value | string | — | Currently selected model ID. |
onChange | (modelId: string) => void | — | Called when user selects a model. |
variant | "dropdown" | "panel" | "dropdown" | Dropdown (floating) or inline panel rendering. |
label | string | "Model" | Field label. |
disabled | boolean | false | Disable the selector. |
optionsrequiredType
ModelOption[]Default —Array of model options with capability metadata.
valueType
stringDefault —Currently selected model ID.
onChangeType
(modelId: string) => voidDefault —Called when user selects a model.
variantType
"dropdown" | "panel"Default "dropdown"Dropdown (floating) or inline panel rendering.
labelType
stringDefault "Model"Field label.
disabledType
booleanDefault falseDisable the selector.
Design Rationale
This component was designed to express:
Explore Related
Was this helpful?