When to Use What?

Guide for choosing the right UI pattern for your needs

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.

How is this guide?

Getting Started

UX Patterns for Devs is a comprehensive resource that helps developers implement effective, accessible, and usable UI components

UX Books for Developers

A curated list of essential UX books to help developers improve their design and implementation skills.

On this page

Selection Patterns (Less than 5 options)

Selection Patterns (5 or more options)

Text Input Patterns

Specialized Input Patterns

Date & Time Patterns

Content Management Patterns

Navigation Patterns