Model Selector
View on StorybookStorybookDropdown 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
Use Cases
AI model switching in chat interfaces
Model comparison tools
API configuration panels
Cost-tier selection for API usage
Best Practices
Do
- ✓ Show model capabilities alongside names
- ✓ Indicate the currently active model clearly
- ✓ Group models by provider or capability
Don't
- ✗ Don't show too many options without categorization
- ✗ Don't allow model switching mid-conversation without warning
- ✗ Don't hide model-specific limitations