Skip to content

Commit f2c70bf

Browse files
thedaviddiasthedaviddias
committed
feat: add when to use what
1 parent 77e777a commit f2c70bf

File tree

2 files changed

+79
-0
lines changed

2 files changed

+79
-0
lines changed

‎content/en/patterns/_meta.tsx

+1
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ export const Separator: FC<{ children: ReactNode }> = ({ children }) => {
1010

1111
export default {
1212
'getting-started': '',
13+
'when-to-use-what': '',
1314
_: {
1415
title: <Separator>Categories</Separator>,
1516
type: 'separator',

‎content/en/patterns/when-to-use-what.mdx

+78
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,78 @@
1+
---
2+
description: "Guide for choosing the right UI pattern for your needs"
3+
icon: Table
4+
---
5+
6+
# When to Use What?
7+
8+
This guide helps you choose the most appropriate UI pattern for your needs.
9+
10+
Each pattern includes:
11+
12+
- ✅ Best use cases
13+
- ❌ When to avoid
14+
- 🎯 Key features
15+
- 🔄 Related patterns
16+
17+
## Selection Patterns (Less than 5 options)
18+
19+
| Pattern | Best For | Avoid When | Key Features | Related |
20+
| ------------------------------------ | ---------------------------------------------- | -------------------------------------- | ---------------- | -------------------------------------------------- |
21+
| [Radio](/patterns/forms/radio) | ✅ Single choice<br/>✅ Visible options | ❌ Many options<br/>❌ Multiple needed | ✅ Clear choices | [Dropdown](/patterns/forms/selection-input) |
22+
| [Checkbox](/patterns/forms/checkbox) | ✅ Multiple choices<br/>✅ Independent options | ❌ Single choice<br/>❌ Many options | ✅ Toggle states | [Multi-select](/patterns/forms/multi-select-input) |
23+
| [Toggle](/patterns/forms/toggle) | ✅ Binary settings<br/>✅ Immediate effect | ❌ Multiple states | ✅ Quick switch | [Checkbox](/patterns/forms/checkbox) |
24+
25+
## Selection Patterns (5 or more options)
26+
27+
| Pattern | Best For | Avoid When | Key Features | Related |
28+
| -------------------------------------------------- | ------------------------------------ | --------------------- | ------------------ | -------------------------------------------- |
29+
| [Dropdown](/patterns/forms/selection-input) | ✅ Limited space<br/>✅ 5-15 options | ❌ Multiple selection | ✅ Compact | [Radio](/patterns/forms/radio) |
30+
| [Autocomplete](/patterns/forms/autocomplete) | ✅ Many options<br/>✅ Search needed | ❌ Few options | ✅ Search & filter | [Search Field](/patterns/forms/search-field) |
31+
| [Multi-select](/patterns/forms/multi-select-input) | ✅ Multiple items<br/>✅ Tags needed | ❌ Single choice | ✅ Bulk selection | [Checkbox](/patterns/forms/checkbox) |
32+
33+
## Text Input Patterns
34+
35+
| Pattern | Best For | Avoid When | Key Features | Related |
36+
| --------------------------------------------- | ------------------------------------- | --------------- | --------------- | ----------------------------------------------- |
37+
| [Text Field](/patterns/forms/text-field) | ✅ Short text<br/>✅ Single line | ❌ Long content | ✅ Simple input | [Rich Text](/patterns/forms/rich-text-editor) |
38+
| [Rich Text](/patterns/forms/rich-text-editor) | ✅ Formatted text<br/>✅ Long content | ❌ Simple text | ✅ Formatting | [Text Field](/patterns/forms/text-field) |
39+
| [Password](/patterns/forms/password) | ✅ Secure entry<br/>✅ Credentials | ❌ Public data | ✅ Masked input | [Code Input](/patterns/forms/code-confirmation) |
40+
| [Search Field](/patterns/forms/search-field) | ✅ Content search<br/>✅ Filtering | ❌ Exact match | ✅ Quick search | [Autocomplete](/patterns/forms/autocomplete) |
41+
42+
## Specialized Input Patterns
43+
44+
| Pattern | Best For | Avoid When | Key Features | Related |
45+
| ----------------------------------------------- | -------------------------------------- | ------------------ | ---------------- | ----------------------------------------------------------- |
46+
| [Currency](/patterns/forms/currency-input) | ✅ Money values<br/>✅ Formatting | ❌ Plain numbers | ✅ Auto-format | [Text Field](/patterns/forms/text-field) |
47+
| [Phone](/patterns/forms/phone-number) | ✅ Phone numbers<br/>✅ Formatting | ❌ Plain text | ✅ Validation | [Text Field](/patterns/forms/text-field) |
48+
| [Color Picker](/patterns/forms/color-picker) | ✅ Color selection<br/>✅ Visual input | ❌ Text input | ✅ Visual picker | [Dropdown](/patterns/forms/selection-input) |
49+
| [Rating](/patterns/forms/rating-input) | ✅ User ratings<br/>✅ Quick input | ❌ Precise numbers | ✅ Star scale | [Radio](/patterns/forms/radio) |
50+
| [Code Input](/patterns/forms/code-confirmation) | ✅ 2FA/OTP<br/>✅ Verification | ❌ Regular input | ✅ Auto-advance | [Password](/patterns/forms/password) |
51+
| [File Input](/patterns/forms/file-input) | ✅ File uploads<br/>✅ Multiple files | ❌ Text input | ✅ File select | [Drag and Drop](/patterns/content-management/drag-and-drop) |
52+
53+
## Date & Time Patterns
54+
55+
| Pattern | Best For | Avoid When | Key Features | Related |
56+
| ------------------------------------------ | ------------------------------------------ | ---------------- | --------------- | ------------------------------------------ |
57+
| [Date Input](/patterns/forms/date-input) | ✅ Basic date entry<br/>✅ Known format | ❌ Visual needed | ✅ Direct entry | [Date Picker](/patterns/forms/date-picker) |
58+
| [Date Picker](/patterns/forms/date-picker) | ✅ Visual dates<br/>✅ Calendar needed | ❌ Quick entry | ✅ Calendar UI | [Date Range](/patterns/forms/date-range) |
59+
| [Date Range](/patterns/forms/date-range) | ✅ Period selection<br/>✅ Start/end dates | ❌ Single date | ✅ Range select | [Date Picker](/patterns/forms/date-picker) |
60+
61+
## Content Management Patterns
62+
63+
| Pattern | Best For | Avoid When | Key Features | Related |
64+
| ----------------------------------------------------------- | ------------------------------------------- | -------------------- | ------------------------- | ------------------------------------------------------- |
65+
| [Accordion](/patterns/content-management/accordion) | ✅ Collapsible sections<br/>✅ Space saving | ❌ Always visible | ✅ Progressive disclosure | [Modal](/patterns/content-management/modal) |
66+
| [Modal](/patterns/content-management/modal) | ✅ Focused tasks<br/>✅ Important actions | ❌ Frequent access | ✅ Focus trap | [Tooltip](/patterns/content-management/tooltip) |
67+
| [Carousel](/patterns/content-management/carousel) | ✅ Multiple items<br/>✅ Limited space | ❌ Comparison needed | ✅ Progressive reveal | [Infinite Scroll](/patterns/navigation/infinite-scroll) |
68+
| [Tooltip](/patterns/content-management/tooltip) | ✅ Extra info<br/>✅ Quick help | ❌ Critical info | ✅ Context help | [Modal](/patterns/content-management/modal) |
69+
| [Drag and Drop](/patterns/content-management/drag-and-drop) | ✅ Reordering<br/>✅ Visual sorting | ❌ Simple selection | ✅ Direct manipulation | [Selection Input](/patterns/forms/selection-input) |
70+
71+
## Navigation Patterns
72+
73+
| Pattern | Best For | Avoid When | Key Features | Related |
74+
| ------------------------------------------------------- | --------------------------------------- | --------------------- | ------------------- | ------------------------------------------------------- |
75+
| [Back to Top](/patterns/navigation/back-to-top) | ✅ Long pages<br/>✅ Quick return | ❌ Short content | ✅ Quick navigation | [Infinite Scroll](/patterns/navigation/infinite-scroll) |
76+
| [Infinite Scroll](/patterns/navigation/infinite-scroll) | ✅ Content feeds<br/>✅ Continuous flow | ❌ Structured content | ✅ Auto-loading | [Back to Top](/patterns/navigation/back-to-top) |
77+
78+
For implementation details and best practices, visit our [Getting Started](/patterns/getting-started) guide.

0 commit comments

Comments
 (0)