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
| Name | Type | Default | Description |
|---|---|---|---|
modelsRequired | AIModel[] | — | Array of available AI models |
value | string | — | Selected model ID |
onValueChange | (value: string) => void | — | Callback when model changes |
isRTL | boolean | false | Whether 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
RTL Considerations
The selector automatically uses RTL-specific labels when isRTL is true. All model properties support Arabic translations via nameAr, providerAr, etc.
LTR (English)
RTL (العربية)
Related Components
Parameter Slider
Adjust AI model parameters
Token Counter
Track token usage and costs
Chat Message
Display chat messages from AI