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	✅ Quick navigation	Infinite Scroll
Infinite Scroll	✅ Content feeds ✅ Continuous flow	❌ Structured content	✅ Auto-loading	Back to Top

For implementation details and best practices, visit our Getting Started guide.

Got a pattern request?

Let us know, and we'll add it!

Send Suggestion

Last updated on December 23, 2024

Getting Started UX Books for Developers