# UX Patterns for Devs: UX Patterns Glossary
URL: /glossary
Source: https://raw.githubusercontent.com/thedaviddias/ux-patterns-for-developers/refs/heads/main/apps/web/content/glossary/index.mdx
A comprehensive glossary of UX patterns, design principles, and web development terminology.
***
title: UX Patterns Glossary
description: A comprehensive glossary of UX patterns, design principles, and web development terminology.
---------------------------------------------------------------------------------------------------------
import { TermsListContainer } from "@/components/glossary/terms-list-container";
Welcome to our comprehensive glossary of UX patterns and web development terminology. This resource is designed to help developers and designers understand the key concepts, patterns, and principles discussed throughout our documentation.
## Browse by Letter
# UX Patterns for Devs: UX Books for Developers
URL: /patterns/books
Source: https://raw.githubusercontent.com/thedaviddias/ux-patterns-for-developers/refs/heads/main/apps/web/content/patterns/books.mdx
A curated list of essential UX books to help developers improve their design and implementation skills.
***
title: "UX Books for Developers"
description: "A curated list of essential UX books to help developers improve their design and implementation skills."
icon: Book
----------
A curated list of books to help developers understand and implement better user experiences.
## Essential Reads
| Cover | Title | Author | Why Developers Should Read It |
| ------------------------------------------------------------------------------------ | ------------------------------------------------ | --------------------------- | -------------------------------------------------------------------------------------------------------------------------------------- |
|  | Don't Make Me Think, Revisited | Steve Krug | • Practical usability principles • Developer-friendly approach • Real-world examples |
|  | UX Fundamentals for Non-UX Professionals | Edward Stull | • Perfect for developers new to UX • Clear, structured approach • Focuses on core concepts |
|  | The Design of Everyday Things | Don Norman | • Fundamental design principles • Understanding user psychology • Error prevention |
|  | [Practical UI](https://www.practical-ui.com/) | Adham Dannaway | • Logic-driven approach • Quick, actionable guidelines • Includes Figma design system • Updated in 2024 |
|  | [Refactoring UI](https://www.refactoringui.com/) | Adam Wathan & Steve Schoger | • Design tactics for developers • Practical, visual examples • Component-based approach • Color & typography guidelines |
## Form Design
| Cover | Title | Author | Why Developers Should Read It |
| ---------------------------------------------------------- | ------------------------------------------------------------------------------------------ | -------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
|  | Designing UX: Forms | Jessica Enders | • Deep dive into form design psychology • Best practices for validation • Accessibility considerations • Mobile-first approach |
|  | Form Design Patterns | Adam Silver | • Step-by-step implementation guide • Progressive enhancement techniques • Accessibility best practices • Real-world examples |
|  | [Dos and Don'ts for Form Input and Selection](https://uxmovement.gumroad.com/l/dodontform) | UX Movement | • Comprehensive form patterns • Visual examples • Practical dos and don'ts • Regular updates included |
## Tools & References
| Cover | Title | Author | Why Developers Should Read It |
| ------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------- | --------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|  | [Smart Interface Design Patterns Checklist Cards](https://www.smashingmagazine.com/2020/08/checklist-cards-release/) | Vitaly Friedman | • 100 ready-to-use checklists • Covers all common UI components • Based on usability research • Perfect for design-implementation discussions |
## Inclusive Design
| Cover | Title | Author | Why Developers Should Read It |
| ------------------------------------------------------------------ | ------------------------- | ---------------- | ------------------------------------------------------------------------------------------------------------------------------------------------- |
|  | Inclusive Design Patterns | Heydon Pickering | • Practical accessibility techniques • ARIA implementation patterns • Progressive enhancement strategies • Cross-browser solutions |
## Advanced UX
| Cover | Title | Author | Why Developers Should Read It |
| --------------------------------------------------------------------- | ---------------------------------------------------- | ---------------- | ------------------------------------------------------------------------------------- |
|  | About Face: The Essentials of Interaction Design | Alan Cooper | • Interaction design patterns • User behavior models • Interface guidelines |
|  | 100 Things Every Designer Needs to Know About People | Susan Weinschenk | • Psychology insights • Research-based decisions • Practical applications |
# UX Patterns for Devs: Getting Started
URL: /patterns/getting-started
Source: https://raw.githubusercontent.com/thedaviddias/ux-patterns-for-developers/refs/heads/main/apps/web/content/patterns/getting-started.mdx
UX Patterns for Devs is a comprehensive resource that helps developers implement effective, accessible, and usable UI components
***
title: "Getting Started"
description: UX Patterns for Devs is a comprehensive resource that helps developers implement effective, accessible, and usable UI components
icon: Album
-----------
## About UX Patterns for Devs
UX Patterns for Devs is a comprehensive resource that helps developers implement effective, accessible, and usable UI components. Each pattern in our documentation is carefully crafted to provide practical guidance while following best practices for user experience and accessibility.
This project is actively maintained and new patterns are added regularly.
Subscribe to our updates by starring the repository on GitHub or by subscribing to our newsletter
for the latest updates.
## How to Use This Documentation
Each pattern in our documentation follows a consistent structure to help you quickly find the information you need:
1. **Overview** - Introduction and use cases for the pattern
2. **Use Cases** - Real-world examples and scenarios where the pattern should be implemented
3. **Benefits** - Key advantages and value propositions of using this pattern
4. **Anatomy** - Detailed breakdown of the component's structure
5. **Best Practices** - Guidelines for implementation, including do's and don'ts
6. **Micro-Interactions & Animations** - Detailed guidance on animations, transitions, and interactive feedback
7. **Tracking & Analytics** - Event tracking implementation and metrics analysis
8. **Localization** - Guidelines for translating and adapting the pattern
9. **Code Examples** - Code examples and technical considerations
10. **Accessibility** - Guidelines for accessibility considerations
11. **SEO** - Search engine optimization considerations and best practices
12. **Browser Support** - Information on browser support for the pattern
13. **Testing** - Guidelines for unit, integration, and accessibility testing
14. **Design Tokens** - Design system variables and customization options
15. **Related Patterns** - Links to similar or complementary patterns
16. **FAQs** - Common questions and detailed answers
17. **Resources** - Additional documentation, articles, libraries...
## Getting Started
To get the most out of this documentation:
1. **Browse Patterns** - Use the sidebar navigation to explore available patterns
2. **Search** - Use the search bar to find specific patterns or concepts
3. **Implementation** - Follow the code examples and guidelines for each pattern
4. **Accessibility** - Pay attention to accessibility requirements for each component
5. **Best Practices** - Review the do's and don'ts before implementing
## How Would We Define "Build Effort"?
Each pattern has a complexity indicator using this simple scale:
| Level | Description |
| --------- | ------------------------------------------------------------------------------------------------------------------------------------- |
| 🟢 Low | Simple implementation, minimal dependencies, little to no JavaScript required (e.g., Tooltip, Expandable Text). |
| 🟡 Medium | Requires state management, user interactions, and accessibility considerations (e.g., Load More, Modal). |
| 🔴 High | Complex UI behavior, animations, accessibility, performance optimizations, and multiple edge cases (e.g., Carousel, Infinite Scroll). |
## Contributing
We welcome contributions from the community! Whether you want to:
* Add new patterns
* Improve existing documentation
* Fix bugs
* Suggest improvements
Visit our [GitHub repository](https://github.com/thedaviddias/ux-patterns-for-developers/blob/main/.github/CONTRIBUTING.md) to learn how to contribute.
## Need Help?
If you need assistance or want to report an issue:
* Open a [GitHub issue](https://github.com/thedaviddias/ux-patterns-for-developers/issues/new/choose)
* Check the pattern's documentation for specific implementation details
# UX Patterns for Devs: Introduction to Patterns
URL: /patterns
Source: https://raw.githubusercontent.com/thedaviddias/ux-patterns-for-developers/refs/heads/main/apps/web/content/patterns/index.mdx
A comprehensive collection of UX patterns for developers to build effective, accessible, and usable UI components.
***
title: Introduction to Patterns
description: A comprehensive collection of UX patterns for developers to build effective, accessible, and usable UI components.
-------------------------------------------------------------------------------------------------------------------------------
Welcome to our comprehensive collection of UX patterns designed specifically for developers. These patterns provide practical, implementable solutions for common user interface challenges.
## Pattern Categories
Our patterns are organized into the following categories:
### 🎯 **Getting Started**
* Essential patterns and concepts to begin your UX journey
* Best practices for implementing user-friendly interfaces
### 📋 **Content Management**
* Patterns for organizing and presenting content effectively
* Includes accordions, carousels, modals, and more
### 🧭 **Layout & Navigation**
* Navigation patterns and layout structures
* Breadcrumbs, menus, pagination, and navigation components
### 💬 **User Feedback**
* Patterns for communicating with users
* Loading states, notifications, progress indicators, and more
### 📝 **Inputs & Forms**
* Form patterns and input components
* Text fields, buttons, validation, and form interactions
## How to Use These Patterns
Each pattern includes:
* **Overview**: Clear explanation of the pattern and its use cases
* **Implementation**: Step-by-step code examples
* **Accessibility**: Guidelines for making patterns accessible
* **Best Practices**: Tips and recommendations for optimal implementation
## Getting Started
If you're new to UX patterns, we recommend starting with the [Getting Started](/en/patterns/getting-started) guide, which covers fundamental concepts and best practices.
## Contributing
These patterns are open source and we welcome contributions! If you have a pattern to share or improvements to suggest, please check out our [GitHub repository](https://github.com/thedaviddias/ux-patterns-for-developers).
# UX Patterns for Devs: When to Use What?
URL: /patterns/when-to-use-what
Source: https://raw.githubusercontent.com/thedaviddias/ux-patterns-for-developers/refs/heads/main/apps/web/content/patterns/when-to-use-what.mdx
Guide for choosing the right UI pattern for your needs
***
title: "When to Use What?"
description: "Guide for choosing the right UI pattern for your needs"
icon: Table
-----------
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 ✅ Visible options | ❌ Many options ❌ Multiple needed | ✅ Clear choices | [Dropdown](/patterns/forms/selection-input) |
| [Checkbox](/patterns/forms/checkbox) | ✅ Multiple choices ✅ Independent options | ❌ Single choice ❌ Many options | ✅ Toggle states | [Multi-select](/patterns/forms/multi-select-input) |
| [Toggle](/patterns/forms/toggle) | ✅ Binary settings ✅ 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 ✅ 5-15 options | ❌ Multiple selection | ✅ Compact | [Radio](/patterns/forms/radio) |
| [Autocomplete](/patterns/forms/autocomplete) | ✅ Many options ✅ Search needed | ❌ Few options | ✅ Search & filter | [Search Field](/patterns/forms/search-field) |
| [Multi-select](/patterns/forms/multi-select-input) | ✅ Multiple items ✅ 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 ✅ Single line | ❌ Long content | ✅ Simple input | [Rich Text](/patterns/forms/rich-text-editor) |
| [Rich Text](/patterns/forms/rich-text-editor) | ✅ Formatted text ✅ Long content | ❌ Simple text | ✅ Formatting | [Text Field](/patterns/forms/text-field) |
| [Password](/patterns/forms/password) | ✅ Secure entry ✅ Credentials | ❌ Public data | ✅ Masked input | [Code Input](/patterns/forms/code-confirmation) |
| [Search Field](/patterns/forms/search-field) | ✅ Content search ✅ 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 ✅ Formatting | ❌ Plain numbers | ✅ Auto-format | [Text Field](/patterns/forms/text-field) |
| [Phone](/patterns/forms/phone-number) | ✅ Phone numbers ✅ Formatting | ❌ Plain text | ✅ Validation | [Text Field](/patterns/forms/text-field) |
| [Color Picker](/patterns/forms/color-picker) | ✅ Color selection ✅ Visual input | ❌ Text input | ✅ Visual picker | [Dropdown](/patterns/forms/selection-input) |
| [Rating](/patterns/forms/rating-input) | ✅ User ratings ✅ Quick input | ❌ Precise numbers | ✅ Star scale | [Radio](/patterns/forms/radio) |
| [Code Input](/patterns/forms/code-confirmation) | ✅ 2FA/OTP ✅ Verification | ❌ Regular input | ✅ Auto-advance | [Password](/patterns/forms/password) |
| [File Input](/patterns/forms/file-input) | ✅ File uploads ✅ 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 ✅ Known format | ❌ Visual needed | ✅ Direct entry | [Date Picker](/patterns/forms/date-picker) |
| [Date Picker](/patterns/forms/date-picker) | ✅ Visual dates ✅ Calendar needed | ❌ Quick entry | ✅ Calendar UI | [Date Range](/patterns/forms/date-range) |
| [Date Range](/patterns/forms/date-range) | ✅ Period selection ✅ 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 ✅ Space saving | ❌ Always visible | ✅ Progressive disclosure | [Modal](/patterns/content-management/modal) |
| [Modal](/patterns/content-management/modal) | ✅ Focused tasks ✅ Important actions | ❌ Frequent access | ✅ Focus trap | [Tooltip](/patterns/content-management/tooltip) |
| [Carousel](/patterns/content-management/carousel) | ✅ Multiple items ✅ Limited space | ❌ Comparison needed | ✅ Progressive reveal | [Infinite Scroll](/patterns/navigation/infinite-scroll) |
| [Tooltip](/patterns/content-management/tooltip) | ✅ Extra info ✅ Quick help | ❌ Critical info | ✅ Context help | [Modal](/patterns/content-management/modal) |
| [Drag and Drop](/patterns/content-management/drag-and-drop) | ✅ Reordering ✅ 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 ✅ Quick return | ❌ Short content ❌ Mobile-first designs | ✅ Quick navigation ✅ One-click access | [Infinite Scroll](/patterns/navigation/infinite-scroll) |
| [Breadcrumb](/patterns/navigation/breadcrumb) | ✅ Deep hierarchies ✅ Complex sites ✅ E-commerce | ❌ Flat structures ❌ Single-level sites | ✅ Location awareness ✅ Easy backtracking | [Navigation Menu](/patterns/navigation/navigation-menu) |
| [Infinite Scroll](/patterns/navigation/infinite-scroll) | ✅ Content feeds ✅ Continuous flow ✅ Social media | ❌ Structured content ❌ Goal-oriented tasks | ✅ Auto-loading ✅ Seamless browsing | [Pagination](/patterns/navigation/pagination) [Load More](/patterns/navigation/load-more) |
| [Load More](/patterns/navigation/load-more) | ✅ Content exploration ✅ User control | ❌ Large datasets ❌ Sequential content | ✅ Manual loading ✅ Performance friendly | [Infinite Scroll](/patterns/navigation/infinite-scroll) [Pagination](/patterns/navigation/pagination) |
| [Pagination](/patterns/navigation/pagination) | ✅ Large datasets ✅ Structured content | ❌ Short lists ❌ Continuous reading | ✅ Clear boundaries ✅ Better orientation | [Load More](/patterns/navigation/load-more) [Infinite Scroll](/patterns/navigation/infinite-scroll) |
| [Hamburger Menu](/patterns/navigation/hambuger-menu) | ✅ Mobile interfaces ✅ Space-saving | ❌ Desktop-first ❌ Critical navigation | ✅ Compact ✅ Expandable | [Navigation Menu](/patterns/navigation/navigation-menu) [Sidebar](/patterns/navigation/sidebar) |
| [Megamenu](/patterns/navigation/megamenu) | ✅ Large sites ✅ Complex hierarchies | ❌ Simple navigation ❌ Mobile interfaces | ✅ Rich content ✅ Category overview | [Navigation Menu](/patterns/navigation/navigation-menu) |
| [Navigation Menu](/patterns/navigation/navigation-menu) | ✅ Primary navigation ✅ Site structure | ❌ Deep hierarchies ❌ Complex categories | ✅ Clear structure ✅ Easy access | [Megamenu](/patterns/navigation/megamenu) |
| [Sidebar](/patterns/navigation/sidebar) | ✅ Dashboard layouts ✅ App interfaces | ❌ Content-heavy sites ❌ Mobile-first | ✅ Persistent nav ✅ Context retention | [Navigation Menu](/patterns/navigation/navigation-menu) |
| [Tabs](/patterns/navigation/tabs) | ✅ Related content ✅ Switching views | ❌ Deep hierarchies ❌ Many sections | ✅ Content grouping ✅ Quick switching | [Navigation Menu](/patterns/navigation/navigation-menu) |
| | | | | |
For implementation details and best practices, visit our [Getting Started](/patterns/getting-started) guide.
# UX Patterns for Devs: Text vs Number vs Email Input: When to Use Each HTML5 Type (2025)
URL: /pattern-guide/choosing-input-types
Source: https://raw.githubusercontent.com/thedaviddias/ux-patterns-for-developers/refs/heads/main/apps/web/content/pattern-guide/choosing-input-types.mdx
Select the most appropriate HTML input type based on your data collection needs and user experience requirements
***
title: "Text vs Number vs Email Input: When to Use Each HTML5 Type (2025)"
description: "Select the most appropriate HTML input type based on your data collection needs and user experience requirements"
icon: TextCursorInput
status: complete
----------------
import { LazyDecisionFlow } from "@/components/decision-flow/lazy-decision-flow";
import {
edges as inputTypeEdges,
nodes as inputTypeNodes,
} from "@/components/decision-flow/data/input-types";
import { ComparisonGrid } from "@/components/pattern-comparison/comparison-grid";
import { ComparisonHero } from "@/components/pattern-comparison/comparison-hero";
import { DecisionFlowSection } from "@/components/pattern-comparison/decision-flow-section";
import { ExamplesGrid } from "@/components/pattern-comparison/examples-grid";
import { ImplementationMetrics } from "@/components/pattern-comparison/implementation-metrics";
Selecting the right input type is crucial for creating efficient and user-friendly forms. Each input type serves specific purposes and comes with built-in features and validations. The choice impacts user experience, data accuracy, and form completion rates.
Use our interactive decision flow below to guide your choice based on factors like data type, validation requirements, and user interaction patterns. Follow the path that best matches your needs to find the recommended input type for your form.
export const comparisonData = {
patterns: [
{
title: "Text Input",
subtitle: "Best for single-line text entry and basic data collection",
href: "/patterns/forms/text-field",
icon: "Input",
theme: "pattern",
criteria: [
"Single-line text entry",
"Basic user input",
"Short responses",
"Simple data collection",
"Form fields like name, email",
],
},
{
title: "Textarea",
subtitle: "Ideal for multi-line content and rich text editing",
href: "/patterns/forms/textarea",
icon: "TextSelect",
theme: "pattern",
criteria: [
"Multi-line text entry",
"Long-form content",
"Rich text editing",
"Comments and descriptions",
"Detailed responses",
],
},
{
title: "Select",
subtitle: "Perfect for choosing from predefined options",
href: "/patterns/forms/selection-input",
icon: "ListBox",
theme: "pattern",
criteria: [
"Predefined options",
"Space-efficient interface",
"Large option sets",
"Structured data input",
"Hierarchical selection",
],
},
{
title: "Radio",
subtitle: "Best for mutually exclusive choices",
href: "/patterns/forms/radio",
icon: "CircleOff",
theme: "pattern",
criteria: [
"Single choice from few options",
"Mutually exclusive selections",
"Visual comparison needed",
"Immediate option visibility",
"Simple decision making",
],
},
{
title: "Checkbox",
subtitle: "Ideal for multiple selections and toggles",
href: "/patterns/forms/checkbox",
icon: "CheckSquare",
theme: "pattern",
criteria: [
"Multiple selections allowed",
"Boolean states",
"Independent options",
"Toggle functionality",
"Group selections",
],
},
],
};
export const implementationData = {
patterns: [
{
pattern: "Text Input",
accessibility: {
label: "Accessibility Support",
value: 90,
status: "green",
description: "Strong native support",
},
mobile: {
label: "Mobile Usability",
value: 95,
status: "green",
description: "Excellent",
},
browser: {
label: "Browser Support",
value: 100,
status: "green",
description: "Universal",
},
},
{
pattern: "Number Input",
accessibility: {
label: "Accessibility Support",
value: 85,
status: "green",
description: "Good native support",
},
mobile: {
label: "Mobile Usability",
value: 80,
status: "yellow",
description: "Numeric keyboard",
},
browser: {
label: "Browser Support",
value: 95,
status: "green",
description: "Well supported",
},
},
{
pattern: "Date Input",
accessibility: {
label: "Accessibility Support",
value: 75,
status: "yellow",
description: "Varies by browser",
},
mobile: {
label: "Mobile Usability",
value: 85,
status: "green",
description: "Native pickers",
},
browser: {
label: "Browser Support",
value: 80,
status: "yellow",
description: "Inconsistent UI",
},
},
{
pattern: "File Input",
accessibility: {
label: "Accessibility Support",
value: 80,
status: "green",
description: "Basic support",
},
mobile: {
label: "Mobile Usability",
value: 75,
status: "yellow",
description: "Device dependent",
},
browser: {
label: "Browser Support",
value: 90,
status: "green",
description: "Well supported",
},
},
{
pattern: "Password Input",
accessibility: {
label: "Accessibility Support",
value: 85,
status: "green",
description: "Good support",
},
mobile: {
label: "Mobile Usability",
value: 90,
status: "green",
description: "Password keyboard",
},
browser: {
label: "Browser Support",
value: 100,
status: "green",
description: "Universal",
},
},
{
pattern: "Color Input",
accessibility: {
label: "Accessibility Support",
value: 70,
status: "yellow",
description: "Limited support",
},
mobile: {
label: "Mobile Usability",
value: 75,
status: "yellow",
description: "Varies by device",
},
browser: {
label: "Browser Support",
value: 85,
status: "yellow",
description: "Modern browsers",
},
},
{
pattern: "Range Input",
accessibility: {
label: "Accessibility Support",
value: 75,
status: "yellow",
description: "Needs ARIA enhancement",
},
mobile: {
label: "Mobile Usability",
value: 80,
status: "yellow",
description: "Touch friendly",
},
browser: {
label: "Browser Support",
value: 90,
status: "green",
description: "Well supported",
},
},
],
};
export const examplesData = {
examples: [
{
pattern: "Text Input",
examples: [
{
title: "Search Fields",
description: "Free-form text search",
imageUrl: "/examples/search-text-input.webp",
},
{
title: "Email Input",
description: "Email address entry",
imageUrl: "/examples/email-input.webp",
},
{
title: "Username Field",
description: "Account creation",
imageUrl: "/examples/username-input.webp",
},
{
title: "Phone Number",
description: "Contact information",
imageUrl: "/examples/phone-input.webp",
},
],
},
{
pattern: "Textarea",
examples: [
{
title: "Comment Box",
description: "User feedback entry",
imageUrl: "/examples/comment-textarea.webp",
},
{
title: "Bio Editor",
description: "Profile description",
imageUrl: "/examples/bio-textarea.webp",
},
{
title: "Message Composer",
description: "Email composition",
imageUrl: "/examples/message-textarea.webp",
},
{
title: "Review Writing",
description: "Product reviews",
imageUrl: "/examples/review-textarea.webp",
},
],
},
{
pattern: "Select",
examples: [
{
title: "Country Selection",
description: "Location picker",
imageUrl: "/examples/country-select.webp",
},
{
title: "Language Chooser",
description: "Website localization",
imageUrl: "/examples/language-select.webp",
},
{
title: "Category Filter",
description: "Product filtering",
imageUrl: "/examples/category-select.webp",
},
{
title: "Time Zone",
description: "Regional settings",
imageUrl: "/examples/timezone-select.webp",
},
],
},
{
pattern: "Radio",
examples: [
{
title: "Payment Methods",
description: "Checkout options",
imageUrl: "/examples/payment-radio.webp",
},
{
title: "Shipping Options",
description: "Delivery selection",
imageUrl: "/examples/shipping-radio.webp",
},
{
title: "Size Selection",
description: "Product variants",
imageUrl: "/examples/size-radio.webp",
},
{
title: "Rating System",
description: "Feedback collection",
imageUrl: "/examples/rating-radio.webp",
},
],
},
{
pattern: "Checkbox",
examples: [
{
title: "Filter Options",
description: "Multi-select filters",
imageUrl: "/examples/filter-checkboxes.webp",
},
{
title: "Terms Agreement",
description: "Legal consent",
imageUrl: "/examples/terms-checkbox.webp",
},
{
title: "Feature Toggle",
description: "Settings panel",
imageUrl: "/examples/features-checkbox.webp",
},
{
title: "Task List",
description: "Todo application",
imageUrl: "/examples/tasks-checkbox.webp",
},
],
},
],
};
## Next steps
Ready to implement your chosen pattern? Check out our detailed implementation guides:
How to implement and style text inputs
Building accessible select components
Best practices for option selection
# UX Patterns for Devs: Choose the Right Pattern
URL: /pattern-guide
Source: https://raw.githubusercontent.com/thedaviddias/ux-patterns-for-developers/refs/heads/main/apps/web/content/pattern-guide/index.mdx
undefined
***
title: "Choose the Right Pattern"
index: true
-----------
Compare similar patterns and make informed decisions based on your specific use case and requirements.
## Pattern Guides
# UX Patterns for Devs: Dropdown vs Radio vs Checkbox: Choosing the Right Form Input (2025)
URL: /pattern-guide/input-selection-guide
Source: https://raw.githubusercontent.com/thedaviddias/ux-patterns-for-developers/refs/heads/main/apps/web/content/pattern-guide/input-selection-guide.mdx
Learn how to select the most appropriate input types for your web forms. Get guidance on when to use text fields, dropdowns, checkboxes, and other form controls.
***
title: "Dropdown vs Radio vs Checkbox: Choosing the Right Form Input (2025)"
summary: "Choose the right input type for your form"
description: "Learn how to select the most appropriate input types for your web forms. Get guidance on when to use text fields, dropdowns, checkboxes, and other form controls."
icon: Text
----------
## When to use Different Types of Text Fields?
```mermaid
graph TD
A[Do users need to enter freeform text?] -->|Yes| B[Does it require a single line?]
B -->|Yes| C[Use Standard Text Field ``]
B -->|No| D[Use Textarea `
```
## Implementation Requirements
### Making Elements Keyboard Accessible
#### Native Interactive Elements
Already keyboard accessible by default:
* ``
* `