Skip to Content
UX Patterns for Devs GPT is now available! Read more →
PatternsWhen to Use What?

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)

PatternBest ForAvoid WhenKey FeaturesRelated
Radio✅ Single choice
✅ Visible options
❌ Many options
❌ Multiple needed
✅ Clear choicesDropdown
Checkbox✅ Multiple choices
✅ Independent options
❌ Single choice
❌ Many options
✅ Toggle statesMulti-select
Toggle✅ Binary settings
✅ Immediate effect
❌ Multiple states✅ Quick switchCheckbox

Selection Patterns (5 or more options)

PatternBest ForAvoid WhenKey FeaturesRelated
Dropdown✅ Limited space
✅ 5-15 options
❌ Multiple selection✅ CompactRadio
Autocomplete✅ Many options
✅ Search needed
❌ Few options✅ Search & filterSearch Field
Multi-select✅ Multiple items
✅ Tags needed
❌ Single choice✅ Bulk selectionCheckbox

Text Input Patterns

PatternBest ForAvoid WhenKey FeaturesRelated
Text Field✅ Short text
✅ Single line
❌ Long content✅ Simple inputRich Text
Rich Text✅ Formatted text
✅ Long content
❌ Simple text✅ FormattingText Field
Password✅ Secure entry
✅ Credentials
❌ Public data✅ Masked inputCode Input
Search Field✅ Content search
✅ Filtering
❌ Exact match✅ Quick searchAutocomplete

Specialized Input Patterns

PatternBest ForAvoid WhenKey FeaturesRelated
Currency✅ Money values
✅ Formatting
❌ Plain numbers✅ Auto-formatText Field
Phone✅ Phone numbers
✅ Formatting
❌ Plain text✅ ValidationText Field
Color Picker✅ Color selection
✅ Visual input
❌ Text input✅ Visual pickerDropdown
Rating✅ User ratings
✅ Quick input
❌ Precise numbers✅ Star scaleRadio
Code Input✅ 2FA/OTP
✅ Verification
❌ Regular input✅ Auto-advancePassword
File Input✅ File uploads
✅ Multiple files
❌ Text input✅ File selectDrag and Drop

Date & Time Patterns

PatternBest ForAvoid WhenKey FeaturesRelated
Date Input✅ Basic date entry
✅ Known format
❌ Visual needed✅ Direct entryDate Picker
Date Picker✅ Visual dates
✅ Calendar needed
❌ Quick entry✅ Calendar UIDate Range
Date Range✅ Period selection
✅ Start/end dates
❌ Single date✅ Range selectDate Picker

Content Management Patterns

PatternBest ForAvoid WhenKey FeaturesRelated
Accordion✅ Collapsible sections
✅ Space saving
❌ Always visible✅ Progressive disclosureModal
Modal✅ Focused tasks
✅ Important actions
❌ Frequent access✅ Focus trapTooltip
Carousel✅ Multiple items
✅ Limited space
❌ Comparison needed✅ Progressive revealInfinite Scroll
Tooltip✅ Extra info
✅ Quick help
❌ Critical info✅ Context helpModal
Drag and Drop✅ Reordering
✅ Visual sorting
❌ Simple selection✅ Direct manipulationSelection Input
PatternBest ForAvoid WhenKey FeaturesRelated
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