Model selector

Searches a supplied model catalog by name, provider and capabilities, with metadata and controlled selection.

Preview

Model

Swift

An example entry for quick text tasks.

Example provider · Text · Fast · 32,000 token context

In action

Choose a model from your catalog

Model

Swift

An example entry for quick text tasks.

Example provider · Text · Fast · 32,000 token context

Search names, providers, and capabilities in this example catalog. Selecting a model changes local state. The application supplies current model availability, context limits, and price labels.

When to use

Use it for

Supply stable model ids and current provider metadata. Search includes names, descriptions, providers and capabilities.
Use value/onValueChange for an application-owned selection or defaultValue for local selection.
Supply icon as decorative React content, contextWindow as a token count and priceLabel as application-verified text.
Disabled models remain visible but cannot be selected. A removed controlled selection is explained rather than silently replaced.
CSS-only markup provides native selection; the React composition adds searchable metadata.

Avoid

Assuming the picker downloads models, calls a provider or updates an SDK connection.
Hardcoding provider prices into the library.

Install

React package

npm install @noorddev/vlak-react

Load the stylesheet once at your app root, then import the components you use.

import "@noorddev/vlak-react/css";
import { ModelSelector } from "@noorddev/vlak-react";

Per-component imports are available at @noorddev/vlak-react/components/model-selector.

Copy the source

npx @noorddev/vlak-cli add model-selector

Adds the component and its dependencies to components/vlak/. Follow the StyleX setup to compile the source in your application.

shadcn registry

npx shadcn add https://vlak.dev/r/model-selector.json

Installs the same source through the shadcn CLI.

React

"use client";
import { useState } from "react";
import { ModelSelector } from "@noorddev/vlak-react";

export function ModelPicker({ priceLabel }: { priceLabel?: string }) {
  const [modelId, setModelId] = useState("swift");
  return <ModelSelector value={modelId} onValueChange={setModelId} models={[
    { id: "swift", name: "Swift", provider: "Your provider", capabilities: ["Text", "Fast"], contextWindow: 32000 },
    { id: "vision", name: "Vision", provider: "Your provider", capabilities: ["Images"], priceLabel },
  ]} />;
}

See the integration example to compose these components with your application's model and data.

Props

ModelSelector

Search and select models from an application-supplied catalog, without provider lookups.

Prop	Type	Default
`models`required	`readonly ModelOption[]`
`value`	`string`
`defaultValue`	`string`	`""`
`onValueChange`	`(modelId: string) => void`
`label`	`string`	`"Model"`
`disabled`	`boolean`	`false`

Also accepts Omit<HTMLAttributes<HTMLDivElement>, "defaultValue">.

The ref reaches HTMLDivElement.

Keyboard

Keys	Does
`Type`	Filters model names and supplied metadata
`Arrow Down, Arrow Up, Home, End`	Navigates available matches, skipping disabled models
`Enter`	Selects the highlighted available model
`Escape`	Closes the list and retains selection

Accessibility

A visible label names the shared Combobox. Disabled matches expose aria-disabled and are skipped during navigation.
Provider icons are decorative; model names and capability text remain readable.
The selected model detail has a subtle 1px frame and 4px corners. Native div attributes and ref pass through.

Markup

The same styles are available as CSS. Native HTML provides the static presentation; React or application code supplies state updates and actions.

npm install @noorddev/vlak

import "@noorddev/vlak/css";

<div class="rs-model-selector"><label class="rs-model-selector-label" for="model">Model</label><select class="rs-input" id="model"><option>Swift · Example provider</option><option>Vision · Example provider</option></select></div>

Classes

.rs-model-selector.rs-model-selector-label.rs-model-selector-option.rs-model-selector-icon.rs-model-selector-text.rs-model-selector-metadata.rs-model-selector-detail.rs-model-selector-description

Depends on

Combobox Input

Use elsewhere

Markdown reference Registry JSON Source AI integration guide