UX Patterns for Devs GPT is now available! Read more →

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

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.

Stay updated with new patterns

Get notified when new UX patterns are added to the collection.

Last updated on September 1, 2025

Getting Started UX Books for Developers