# UX Patterns for Developers

## pattern-guide

- [Text vs Number vs Email Input: When to Use Each HTML5 Type (2025)](/pattern-guide/choosing-input-types): Select the most appropriate HTML input type based on your data collection needs and user experience requirements
- [Choose the Right Pattern](/pattern-guide): undefined
- [Dropdown vs Radio vs Checkbox: Choosing the Right Form Input (2025)](/pattern-guide/input-selection-guide): 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.
- [Modal vs Popover vs Drawer vs Tooltip: When to Use Each (2025 Guide)](/pattern-guide/modal-vs-popover-guide): An interactive guide to help you choose the right overlay pattern for your use case
- [Pagination vs Infinite Scroll: When to Use Each Pattern (2025)](/pattern-guide/pagination-vs-infinite-scroll): Choose the right content loading pattern based on your user needs and content type
- [Table vs List vs Cards: When to Use Each Data Display Pattern (2025)](/pattern-guide/table-vs-list-vs-cards): Choose the right data display pattern based on your content type, user needs, and device constraints

## patterns

- [UX Books for Developers](/patterns/books): A curated list of essential UX books to help developers improve their design and implementation skills.
- [Getting Started](/patterns/getting-started): UX Patterns for Devs is a comprehensive resource that helps developers implement effective, accessible, and usable UI components
- [Introduction to Patterns](/patterns): A comprehensive collection of UX patterns for developers to build effective, accessible, and usable UI components.
- [When to Use What?](/patterns/when-to-use-what): Guide for choosing the right UI pattern for your needs
- [Accordion](/patterns/content-management/accordion): Create effective accordion components for your web applications. Learn best practices for implementing expandable content sections with proper accessibility and keyboard support.
- [Carousel](/patterns/content-management/carousel): Build effective carousel components for your web applications. Learn best practices for implementing accessible, responsive carousels with proper navigation and touch support.
- [Expandable Text](/patterns/content-management/expandable-text): Create expandable text components with progressive disclosure and accessibility features for better content management.
- [Modal](/patterns/content-management/modal): Build accessible modal dialogs with proper focus management, keyboard interactions, and user experience best practices.
- [Popover](/patterns/content-management/popover): Implement user-friendly popover components in your web applications. Learn best practices for contextual information display, positioning, and accessibility with practical examples.
- [Tooltip](/patterns/content-management/tooltip): Implement effective tooltip components in your web applications. Learn best practices for contextual help, positioning strategies, and accessibility considerations.
- [Data Table](/patterns/data-display/table): Learn how to implement accessible and performant data tables. Discover best practices for sorting, filtering, pagination, and responsive table designs.
- [Autocomplete](/patterns/forms/autocomplete): Build user-friendly autocomplete with search suggestions, keyboard navigation, and accessibility features.
- [Button](/patterns/forms/button): Create accessible and user-friendly buttons with proper states, design patterns, and implementation guidelines.
- [Checkbox](/patterns/forms/checkbox): Learn how to implement accessible checkbox inputs in your web applications. Discover best practices for multiple selection controls, states handling, and accessibility.
- [Password](/patterns/forms/password): Build secure and user-friendly password fields with validation, strength indicators, and accessibility features.
- [Radio Button](/patterns/forms/radio): Implement accessible radio button groups in your web applications. Learn best practices for single-choice selection controls, keyboard navigation, and ARIA attributes.
- [Selection Input](/patterns/forms/selection-input): Learn how to implement user-friendly selection inputs in your web applications. Discover best practices for dropdowns, comboboxes, and list boxes with accessibility and usability guidelines.
- [Text Field](/patterns/forms/text-field): Implement accessible text input fields with validation, error handling, and user experience best practices.
- [Back to Top](/patterns/navigation/back-to-top): Implement a Back to Top button for enhanced navigation on long pages with best practices for placement and accessibility.
- [Breadcrumb](/patterns/navigation/breadcrumb): Create effective breadcrumb navigation for better site orientation. Learn implementation techniques, accessibility requirements, and design best practices for clear hierarchical navigation.
- [Infinite scroll](/patterns/navigation/infinite-scroll): Create seamless content loading with infinite scroll, focusing on performance, accessibility, and user experience best practices.
- [Load More](/patterns/navigation/load-more): Build efficient content loading with the Load More pattern, focusing on user experience and performance optimization.
- [Pagination](/patterns/navigation/pagination): Learn best practices for building accessible, user-friendly page navigation with clear guidelines for design and performance.

## glossary

- [UX Patterns Glossary](/glossary): A comprehensive glossary of UX patterns, design principles, and web development terminology.
- [ARIA Attributes](/glossary/a/aria-attributes): HTML attributes that provide accessibility information to assistive technologies
- [Design Tokens](/glossary/d/design-tokens): Platform-agnostic variables that store design decisions for consistent implementation across products and teams
- [DOM (Document Object Model)](/glossary/d/dom): A programming interface that represents HTML and XML documents as a tree structure, allowing JavaScript to interact with and modify page content
- [Canonical Tags](/glossary/c/canonical-tags): HTML elements that specify the preferred URL for duplicate or similar content to prevent SEO issues
- [CLS (Cumulative Layout Shift)](/glossary/c/cls-cumulative-layout-shift): A Core Web Vital metric that measures visual stability by quantifying unexpected layout shifts during page load
- [Keyboard Navigation](/glossary/k/keyboard-navigation): The ability to navigate and interact with a website or application using only keyboard input, without requiring a mouse
- [Lazy Loading](/glossary/l/lazy-loading): A performance optimization technique that delays loading of non-critical resources until they are needed
- [Live Regions](/glossary/l/live-regions): ARIA attributes that announce dynamic content changes to screen reader users without requiring focus
- [Pagination](/glossary/p/pagination): A navigation pattern that divides content into separate pages to improve usability and performance
- [Progressive Loading](/glossary/p/progressive-loading): A technique that loads content gradually to improve initial page load times and user experience
- [Screen Reader](/glossary/s/screen-reader): Assistive technology that converts digital text and interface elements into speech or braille output for users with visual impairments
- [Semantic HTML](/glossary/s/semantic-html): HTML elements that carry meaning about their content structure and purpose
- [Skeleton Screen](/glossary/s/skeleton-screen): A loading state UI pattern that displays placeholder content shapes while actual content is being fetched
- [Throttle and Debounce](/glossary/t/throttle-debounce): Performance optimization techniques that limit how often a function can be executed in response to continuous events
- [Touch Targets](/glossary/t/touch-targets): Interactive UI elements sized and spaced appropriately for touch interaction on mobile devices
- [Viewport](/glossary/v/viewport): The visible area of a web page within a browser window or mobile device screen