Overview
How might we design input mode toggle so people can trust and act on AI output?
When this pattern fits
- Essential for AI assistants, mobile applications, and accessibility-focused tools where supporting multiple input modes improves user experience and accessibility.
When to skip or lighten it
- Text-only products with no alternate modality.
- Voice-only devices where a toggle would be meaningless.
- Modes that wipe the draft on switch without warning.
States
State model coming soon
Key UX elements
Key UX elements coming soon
Anti-patterns to avoid
Hidden mode switches buried in settings.
Switching modes that discard the in-progress draft.
Ambiguous icons with no label for voice vs dictation vs call.
Forcing a mode based on device without an override.
How products use it
| Product | Implementation |
|---|---|
| ChatGPT | Composer controls to enter voice mode from text chat. |
| Google Gemini | Mic and text entry toggles on the home composer. |
| Claude | Voice and text input options on the chat surface. |
| Perplexity | Voice and text modes for search-style queries. |
Real-world examples
How shipped products implement input mode toggle, from our teardown guides.
ChatGPTChatGPT composer UX: input bar, tools & voice design
Design the composer
ClaudeClaude composer UX: model picker, skills & attachments
Design the composer
DeepSeekDeepSeek composer UX: DeepThink, Search & modes
Design the composer
Google AI ModeGoogle AI Mode composer UX: Canvas, Create & Lens
Design the composer
GrokGrok composer UX: skills, models & voice input
Design the composer
LovableLovable composer UX: Build, Plan & templates
Design the composer
ManusManus composer UX: assign tasks, modes & agent tiers
Design the composer
ManusManus output UX: agent runs, files & deliverables
Output, artifacts & refinement
PerplexityPerplexity composer UX: search modes & connectors
Design the composer
Implementation
Copy this prompt to generate a production-ready implementation in Cursor, Claude Code, Lovable, or any AI coding agent.
Generate a production-ready implementation of the "Input Mode Toggle" AI interface design pattern.
Pattern Definition:Frequently asked questions
What is an input mode toggle?
It is a control that switches how users enter prompts—text, voice, dictation—while keeping them in the same composer context.
Should the draft survive a mode switch?
Yes whenever possible. Converting voice partials into editable text before leaving voice mode is a common pattern.
How does this differ from multimodal input?
Multimodal input attaches images or files alongside text. Mode toggle changes the primary entry modality itself.
Where should the toggle live?
Adjacent to the composer send controls. Settings-only mode switches are too slow for moment-to-moment use.