When to Use What?
This guide helps you choose the most appropriate UI pattern for your needs.
Each pattern includes:
- ✅ Best use cases
- ❌ When to avoid
- 🎯 Key features
- 🔄 Related patterns
Selection Patterns (Less than 5 options)
Pattern | Best For | Avoid When | Key Features | Related |
---|---|---|---|---|
Radio | ✅ Single choice ✅ Visible options | ❌ Many options ❌ Multiple needed | ✅ Clear choices | Dropdown |
Checkbox | ✅ Multiple choices ✅ Independent options | ❌ Single choice ❌ Many options | ✅ Toggle states | Multi-select |
Toggle | ✅ Binary settings ✅ Immediate effect | ❌ Multiple states | ✅ Quick switch | Checkbox |
Selection Patterns (5 or more options)
Pattern | Best For | Avoid When | Key Features | Related |
---|---|---|---|---|
Dropdown | ✅ Limited space ✅ 5-15 options | ❌ Multiple selection | ✅ Compact | Radio |
Autocomplete | ✅ Many options ✅ Search needed | ❌ Few options | ✅ Search & filter | Search Field |
Multi-select | ✅ Multiple items ✅ Tags needed | ❌ Single choice | ✅ Bulk selection | Checkbox |
Text Input Patterns
Pattern | Best For | Avoid When | Key Features | Related |
---|---|---|---|---|
Text Field | ✅ Short text ✅ Single line | ❌ Long content | ✅ Simple input | Rich Text |
Rich Text | ✅ Formatted text ✅ Long content | ❌ Simple text | ✅ Formatting | Text Field |
Password | ✅ Secure entry ✅ Credentials | ❌ Public data | ✅ Masked input | Code Input |
Search Field | ✅ Content search ✅ Filtering | ❌ Exact match | ✅ Quick search | Autocomplete |
Specialized Input Patterns
Pattern | Best For | Avoid When | Key Features | Related |
---|---|---|---|---|
Currency | ✅ Money values ✅ Formatting | ❌ Plain numbers | ✅ Auto-format | Text Field |
Phone | ✅ Phone numbers ✅ Formatting | ❌ Plain text | ✅ Validation | Text Field |
Color Picker | ✅ Color selection ✅ Visual input | ❌ Text input | ✅ Visual picker | Dropdown |
Rating | ✅ User ratings ✅ Quick input | ❌ Precise numbers | ✅ Star scale | Radio |
Code Input | ✅ 2FA/OTP ✅ Verification | ❌ Regular input | ✅ Auto-advance | Password |
File Input | ✅ File uploads ✅ Multiple files | ❌ Text input | ✅ File select | Drag and Drop |
Date & Time Patterns
Pattern | Best For | Avoid When | Key Features | Related |
---|---|---|---|---|
Date Input | ✅ Basic date entry ✅ Known format | ❌ Visual needed | ✅ Direct entry | Date Picker |
Date Picker | ✅ Visual dates ✅ Calendar needed | ❌ Quick entry | ✅ Calendar UI | Date Range |
Date Range | ✅ Period selection ✅ Start/end dates | ❌ Single date | ✅ Range select | Date Picker |
Content Management Patterns
Pattern | Best For | Avoid When | Key Features | Related |
---|---|---|---|---|
Accordion | ✅ Collapsible sections ✅ Space saving | ❌ Always visible | ✅ Progressive disclosure | Modal |
Modal | ✅ Focused tasks ✅ Important actions | ❌ Frequent access | ✅ Focus trap | Tooltip |
Carousel | ✅ Multiple items ✅ Limited space | ❌ Comparison needed | ✅ Progressive reveal | Infinite Scroll |
Tooltip | ✅ Extra info ✅ Quick help | ❌ Critical info | ✅ Context help | Modal |
Drag and Drop | ✅ Reordering ✅ Visual sorting | ❌ Simple selection | ✅ Direct manipulation | Selection Input |
Navigation Patterns
Pattern | Best For | Avoid When | Key Features | Related |
---|---|---|---|---|
Back to Top | ✅ Long pages ✅ Quick return | ❌ Short content ❌ Mobile-first designs | ✅ Quick navigation ✅ One-click access | Infinite Scroll |
Breadcrumb | ✅ Deep hierarchies ✅ Complex sites ✅ E-commerce | ❌ Flat structures ❌ Single-level sites | ✅ Location awareness ✅ Easy backtracking | Navigation Menu |
Infinite Scroll | ✅ Content feeds ✅ Continuous flow ✅ Social media | ❌ Structured content ❌ Goal-oriented tasks | ✅ Auto-loading ✅ Seamless browsing | Pagination Load More |
Load More | ✅ Content exploration ✅ User control | ❌ Large datasets ❌ Sequential content | ✅ Manual loading ✅ Performance friendly | Infinite Scroll Pagination |
Pagination | ✅ Large datasets ✅ Structured content | ❌ Short lists ❌ Continuous reading | ✅ Clear boundaries ✅ Better orientation | Load More Infinite Scroll |
Hamburger Menu | ✅ Mobile interfaces ✅ Space-saving | ❌ Desktop-first ❌ Critical navigation | ✅ Compact ✅ Expandable | Navigation Menu Sidebar |
Megamenu | ✅ Large sites ✅ Complex hierarchies | ❌ Simple navigation ❌ Mobile interfaces | ✅ Rich content ✅ Category overview | Navigation Menu |
Navigation Menu | ✅ Primary navigation ✅ Site structure | ❌ Deep hierarchies ❌ Complex categories | ✅ Clear structure ✅ Easy access | Megamenu |
Sidebar | ✅ Dashboard layouts ✅ App interfaces | ❌ Content-heavy sites ❌ Mobile-first | ✅ Persistent nav ✅ Context retention | Navigation Menu |
Tabs | ✅ Related content ✅ Switching views | ❌ Deep hierarchies ❌ Many sections | ✅ Content grouping ✅ Quick switching | Navigation Menu |
For implementation details and best practices, visit our Getting Started guide.
Last updated on