Skip to main content
Noor UI

Model Selector

Dropdown selector for choosing AI models with specs display. Shows model capabilities including speed, context length, pricing, and recommendations.

Preview

Selected: gpt-4

Installation

Terminalbash

Usage

Reacttsx

Examples

With Default Models

Includes pre-configured models from OpenAI, Anthropic, and Google:

tsx

Model Specifications

Each model displays:

  • Model name and provider (grouped)
  • Speed indicator (fast/medium/slow) with color coding
  • Context length (in tokens)
  • Pricing (optional)
  • Recommended badge (optional)
  • Custom icon

Custom Models

Define your own models with custom properties:

tsx

Controlled Component

Current selection: gpt-4

tsx

AIModel Interface

TypeScripttypescript

Props

NameTypeDefaultDescription
models
Required
AIModel[]—Array of available AI models
value
string—Selected model ID
onValueChange
(value: string) => void—Callback when model changes
isRTL
booleanfalseWhether text direction is RTL
placeholder
string—Placeholder text
placeholderAr
string—Placeholder text in Arabic
className
string—Additional CSS classes

Accessibility

Screen Reader

Built on Radix UI Select primitive with full ARIA support. Model names, specs, and badges are all properly announced.

Keyboard Navigation

  • Enter or Space: Open dropdown
  • ↑ / ↓: Navigate options
  • Enter: Select model
  • Esc: Close dropdown

Related Components

Parameter Slider

Adjust AI model parameters

Token Counter

Track token usage and costs

Chat Message

Display chat messages from AI