Skip to content

Commit

Permalink
feat: add when to use what
Browse files Browse the repository at this point in the history
  • Loading branch information
@thedaviddias
thedaviddias committed Jan 17, 2025
1 parent 77e777a commit f2c70bf
Show file tree
Hide file tree
Showing 2 changed files with 79 additions and 0 deletions.
1 change: 1 addition & 0 deletions content/en/patterns/_meta.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ export const Separator: FC<{ children: ReactNode }> = ({ children }) => {

export default {
'getting-started': '',
'when-to-use-what': '',
_: {
title: <Separator>Categories</Separator>,
type: 'separator',
Expand Down
78 changes: 78 additions & 0 deletions content/en/patterns/when-to-use-what.mdx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,78 @@
---
description: "Guide for choosing the right UI pattern for your needs"
icon: Table
---

# 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](/patterns/forms/radio) | ✅ Single choice<br/>✅ Visible options | ❌ Many options<br/>❌ Multiple needed | ✅ Clear choices | [Dropdown](/patterns/forms/selection-input) |
| [Checkbox](/patterns/forms/checkbox) | ✅ Multiple choices<br/>✅ Independent options | ❌ Single choice<br/>❌ Many options | ✅ Toggle states | [Multi-select](/patterns/forms/multi-select-input) |
| [Toggle](/patterns/forms/toggle) | ✅ Binary settings<br/>✅ Immediate effect | ❌ Multiple states | ✅ Quick switch | [Checkbox](/patterns/forms/checkbox) |

## Selection Patterns (5 or more options)

| Pattern | Best For | Avoid When | Key Features | Related |
| -------------------------------------------------- | ------------------------------------ | --------------------- | ------------------ | -------------------------------------------- |
| [Dropdown](/patterns/forms/selection-input) | ✅ Limited space<br/>✅ 5-15 options | ❌ Multiple selection | ✅ Compact | [Radio](/patterns/forms/radio) |
| [Autocomplete](/patterns/forms/autocomplete) | ✅ Many options<br/>✅ Search needed | ❌ Few options | ✅ Search & filter | [Search Field](/patterns/forms/search-field) |
| [Multi-select](/patterns/forms/multi-select-input) | ✅ Multiple items<br/>✅ Tags needed | ❌ Single choice | ✅ Bulk selection | [Checkbox](/patterns/forms/checkbox) |

## Text Input Patterns

| Pattern | Best For | Avoid When | Key Features | Related |
| --------------------------------------------- | ------------------------------------- | --------------- | --------------- | ----------------------------------------------- |
| [Text Field](/patterns/forms/text-field) | ✅ Short text<br/>✅ Single line | ❌ Long content | ✅ Simple input | [Rich Text](/patterns/forms/rich-text-editor) |
| [Rich Text](/patterns/forms/rich-text-editor) | ✅ Formatted text<br/>✅ Long content | ❌ Simple text | ✅ Formatting | [Text Field](/patterns/forms/text-field) |
| [Password](/patterns/forms/password) | ✅ Secure entry<br/>✅ Credentials | ❌ Public data | ✅ Masked input | [Code Input](/patterns/forms/code-confirmation) |
| [Search Field](/patterns/forms/search-field) | ✅ Content search<br/>✅ Filtering | ❌ Exact match | ✅ Quick search | [Autocomplete](/patterns/forms/autocomplete) |

## Specialized Input Patterns

| Pattern | Best For | Avoid When | Key Features | Related |
| ----------------------------------------------- | -------------------------------------- | ------------------ | ---------------- | ----------------------------------------------------------- |
| [Currency](/patterns/forms/currency-input) | ✅ Money values<br/>✅ Formatting | ❌ Plain numbers | ✅ Auto-format | [Text Field](/patterns/forms/text-field) |
| [Phone](/patterns/forms/phone-number) | ✅ Phone numbers<br/>✅ Formatting | ❌ Plain text | ✅ Validation | [Text Field](/patterns/forms/text-field) |
| [Color Picker](/patterns/forms/color-picker) | ✅ Color selection<br/>✅ Visual input | ❌ Text input | ✅ Visual picker | [Dropdown](/patterns/forms/selection-input) |
| [Rating](/patterns/forms/rating-input) | ✅ User ratings<br/>✅ Quick input | ❌ Precise numbers | ✅ Star scale | [Radio](/patterns/forms/radio) |
| [Code Input](/patterns/forms/code-confirmation) | ✅ 2FA/OTP<br/>✅ Verification | ❌ Regular input | ✅ Auto-advance | [Password](/patterns/forms/password) |
| [File Input](/patterns/forms/file-input) | ✅ File uploads<br/>✅ Multiple files | ❌ Text input | ✅ File select | [Drag and Drop](/patterns/content-management/drag-and-drop) |

## Date & Time Patterns

| Pattern | Best For | Avoid When | Key Features | Related |
| ------------------------------------------ | ------------------------------------------ | ---------------- | --------------- | ------------------------------------------ |
| [Date Input](/patterns/forms/date-input) | ✅ Basic date entry<br/>✅ Known format | ❌ Visual needed | ✅ Direct entry | [Date Picker](/patterns/forms/date-picker) |
| [Date Picker](/patterns/forms/date-picker) | ✅ Visual dates<br/>✅ Calendar needed | ❌ Quick entry | ✅ Calendar UI | [Date Range](/patterns/forms/date-range) |
| [Date Range](/patterns/forms/date-range) | ✅ Period selection<br/>✅ Start/end dates | ❌ Single date | ✅ Range select | [Date Picker](/patterns/forms/date-picker) |

## Content Management Patterns

| Pattern | Best For | Avoid When | Key Features | Related |
| ----------------------------------------------------------- | ------------------------------------------- | -------------------- | ------------------------- | ------------------------------------------------------- |
| [Accordion](/patterns/content-management/accordion) | ✅ Collapsible sections<br/>✅ Space saving | ❌ Always visible | ✅ Progressive disclosure | [Modal](/patterns/content-management/modal) |
| [Modal](/patterns/content-management/modal) | ✅ Focused tasks<br/>✅ Important actions | ❌ Frequent access | ✅ Focus trap | [Tooltip](/patterns/content-management/tooltip) |
| [Carousel](/patterns/content-management/carousel) | ✅ Multiple items<br/>✅ Limited space | ❌ Comparison needed | ✅ Progressive reveal | [Infinite Scroll](/patterns/navigation/infinite-scroll) |
| [Tooltip](/patterns/content-management/tooltip) | ✅ Extra info<br/>✅ Quick help | ❌ Critical info | ✅ Context help | [Modal](/patterns/content-management/modal) |
| [Drag and Drop](/patterns/content-management/drag-and-drop) | ✅ Reordering<br/>✅ Visual sorting | ❌ Simple selection | ✅ Direct manipulation | [Selection Input](/patterns/forms/selection-input) |

## Navigation Patterns

| Pattern | Best For | Avoid When | Key Features | Related |
| ------------------------------------------------------- | --------------------------------------- | --------------------- | ------------------- | ------------------------------------------------------- |
| [Back to Top](/patterns/navigation/back-to-top) | ✅ Long pages<br/>✅ Quick return | ❌ Short content | ✅ Quick navigation | [Infinite Scroll](/patterns/navigation/infinite-scroll) |
| [Infinite Scroll](/patterns/navigation/infinite-scroll) | ✅ Content feeds<br/>✅ Continuous flow | ❌ Structured content | ✅ Auto-loading | [Back to Top](/patterns/navigation/back-to-top) |

For implementation details and best practices, visit our [Getting Started](/patterns/getting-started) guide.

0 comments on commit f2c70bf

Please sign in to comment.