Ui Design Patterns

UI Design Patterns

A comprehensive guide to common user interface design patterns, component patterns, interaction patterns, and accessibility best practices for building modern web and mobile applications.

When to Use This Skill

Use this skill when you need to:

• Design User Interfaces: Create intuitive and user-friendly interface designs
• Implement UI Components: Build reusable interface components following established patterns
• Solve UX Problems: Address common user experience challenges with proven solutions
• Ensure Accessibility: Make interfaces accessible to all users including those with disabilities
• Build Design Systems: Create consistent component libraries and design systems
• Review Interfaces: Evaluate existing interfaces for usability and best practices
• Prototype Interactions: Design and implement interactive UI behaviors
• Optimize Navigation: Structure information architecture and navigation flows
• Handle Form Design: Create effective forms with proper validation and feedback
• Display Data: Present complex data in clear, scannable formats
• Provide Feedback: Communicate system state and user actions effectively
• Responsive Design: Adapt interfaces for different screen sizes and devices

Core Concepts

UI Patterns

UI patterns are reusable solutions to common design problems. They provide:

• Consistency: Users recognize familiar patterns across applications
• Efficiency: Proven solutions save design and development time
• Usability: Patterns are tested and refined through widespread use
• Communication: Shared vocabulary for designers and developers
• Accessibility: Established patterns often include accessibility considerations

Design Systems

A design system is a collection of reusable components, patterns, and guidelines:

• Component Library: Reusable UI building blocks
• Design Tokens: Variables for colors, spacing, typography
• Usage Guidelines: When and how to use each component
• Accessibility Standards: WCAG compliance requirements
• Code Examples: Implementation references
• Documentation: Comprehensive guides and principles

Atomic Design Methodology

Breaking interfaces into atomic units:

• Atoms: Basic building blocks (buttons, inputs, labels)
• Molecules: Simple combinations of atoms (search field with button)
• Organisms: Complex components (headers, forms, cards)
• Templates: Page-level layouts
• Pages: Specific instances with real content

Navigation Patterns

1. Tabs Pattern

Organize content into multiple panels shown one at a time.

When to Use:

• Related content categories at the same hierarchy level
• Limited number of sections (3-7 tabs ideal)
• User needs to switch between views frequently
• Screen space is limited

Anatomy:

[Tab 1] [Tab 2] [Tab 3]
─────────────────────────
Content for active tab

Best Practices:

• Highlight active tab clearly
• Keep tab labels short and descriptive
• Maintain state when switching tabs
• Use icons + text for clarity
• Ensure keyboard navigation works
• Consider mobile alternatives (dropdown, segmented control)

Accessibility:

• Use ARIA role="tablist", role="tab", role="tabpanel"
• Implement arrow key navigation
• Set aria-selected and aria-controls
• Ensure tab panels are focusable

Example HTML:

<div role="tablist" aria-label="Content sections">
  <button role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1">
    Overview
  </button>
  <button role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2">
    Details
  </button>
  <button role="tab" aria-selected="false" aria-controls="panel-3" id="tab-3">
    Settings
  </button>
</div>

<div role="tabpanel" id="panel-1" aria-labelledby="tab-1">
  Overview content...
</div>

2. Accordion Pattern

Vertically stacked sections with expand/collapse functionality.

When to Use:

• Long pages with distinct sections
• Progressive disclosure of information
• FAQ sections
• Settings panels
• Limited screen space

Types:

• Single Expand: Only one panel open at a time
• Multi Expand: Multiple panels can be open simultaneously
• Nested: Accordions within accordions

Best Practices:

• Use clear, descriptive headers
• Provide visual indicators (chevron, +/-)
• Consider default state (collapsed vs first open)
• Animate transitions smoothly (200-300ms)
• Maintain content when collapsed
• Allow keyboard control

Accessibility:

• Use <button> for headers
• Set aria-expanded attribute
• Use aria-controls to link header and panel
• Ensure keyboard navigation (Enter, Space, Arrow keys)
• Provide proper heading hierarchy

Example Structure:

<div class="accordion">
  <h3>
    <button aria-expanded="false" aria-controls="section-1">
      Section Title
      <span class="icon" aria-hidden="true">▼</span>
    </button>
  </h3>
  <div id="section-1" hidden>
    <p>Section content...</p>
  </div>
</div>

3. Breadcrumbs Pattern

Show user's location in site hierarchy.

When to Use:

• Deep site hierarchies (3+ levels)
• E-commerce category navigation
• Documentation sites
• Multi-step processes

Best Practices:

• Show current location clearly
• Make previous levels clickable
• Use appropriate separators (>, /, →)
• Keep labels concise
• Consider mobile truncation
• Place at top of page

Accessibility:

• Use <nav> with aria-label="Breadcrumb"
• Mark current page with aria-current="page"
• Provide sufficient color contrast
• Ensure keyboard navigation

Example:

<nav aria-label="Breadcrumb">
  <ol>
    <li><a href="/">Home</a></li>
    <li><a href="/products">Products</a></li>
    <li><a href="/products/electronics">Electronics</a></li>
    <li aria-current="page">Laptops</li>
  </ol>
</nav>

4. Pagination Pattern

Navigate through large sets of content split across pages.

Types:

• Numbered: Show page numbers (1, 2, 3...)
• Load More: Button to load additional content
• Infinite Scroll: Automatically load as user scrolls
• Prev/Next: Simple navigation between pages

When to Use:

• Search results
• Product listings
• Blog archives
• Data tables

Best Practices:

• Show current page clearly
• Provide Previous/Next controls
• Include First/Last page links
• Show total page count or results
• Use ellipsis for skipped pages (1 ... 5 6 7 ... 20)
• Maintain scroll position appropriately
• Consider load time and performance

Accessibility:

• Use <nav> with aria-label="Pagination"
• Mark current page with aria-current="page"
• Disable non-functional links properly
• Provide text alternatives for icon-only controls

5. Menu Patterns

Dropdown Menu

Reveals additional options on click or hover.

Best Practices:

• Prefer click over hover for mobile compatibility
• Add small delay before closing on hover
• Indicate submenu with arrow icon
• Keep menu depths shallow (2-3 levels max)
• Position intelligently to avoid viewport overflow

Mega Menu

Large dropdown showing multiple columns and categories.

When to Use:

• E-commerce sites with many categories
• Sites with complex information architecture
• When standard dropdown feels cramped

Best Practices:

• Use grid layout for organization
• Include visual elements (icons, images)
• Group related items
• Provide clear visual hierarchy
• Close on outside click or Esc key

Hamburger Menu

Collapsible menu for mobile navigation.

Best Practices:

• Use recognizable icon (three horizontal lines)
• Provide label for clarity ("Menu")
• Animate opening/closing
• Disable body scroll when open
• Include close button in menu
• Consider alternatives for better discoverability

Accessibility:

• Use proper ARIA roles and states
• Support keyboard navigation
• Announce menu state to screen readers
• Ensure focus management

Form Patterns

1. Input Validation Pattern

Provide feedback on user input correctness.

Validation Types:

• Required Fields: Must be completed
• Format Validation: Email, phone, URL patterns
• Length Validation: Min/max characters
• Range Validation: Numeric ranges
• Custom Rules: Business logic validation

Timing:

• On Submit: Traditional approach, all errors at once
• On Blur: Validate when leaving field
• On Change: Real-time validation as typing
• Hybrid: Combine approaches for best UX

Best Practices:

• Mark required fields clearly (asterisk, "required" label)
• Provide inline error messages near fields
• Use clear, helpful error messages
• Show success states when appropriate
• Group related errors
• Disable submit until form is valid (optional)
• Preserve user input when showing errors
• Support browser autofill

Error Message Guidelines:

• Be specific about the problem
• Explain how to fix it
• Use friendly, non-technical language
• Avoid blame ("You entered..." → "Email format invalid")

Visual Indicators:

• Red border/background for errors
• Green for success/valid
• Icons to reinforce state
• Sufficient color contrast

Accessibility:

• Use aria-invalid="true" for invalid fields
• Link errors with aria-describedby
• Announce errors to screen readers
• Ensure error messages are programmatically associated

Example:

<div class="form-field">
  <label for="email">
    Email Address <span aria-label="required">*</span>
  </label>
  <input
    type="email"
    id="email"
    aria-invalid="true"
    aria-describedby="email-error"
    required
  />
  <div id="email-error" class="error-message" role="alert">
    Please enter a valid email address
  </div>
</div>

2. Multi-Step Forms Pattern

Break long forms into multiple steps or pages.

When to Use:

• Complex forms with many fields
• Logical grouping of related information
• Onboarding flows
• Checkout processes
• User registration

Components:

• Progress Indicator: Show current step and total steps
• Step Navigation: Move between steps
• Review Step: Summary before submission
• Save Draft: Allow returning later

Best Practices:

• Keep steps focused on single topic
• Show progress clearly
• Allow backward navigation
• Validate each step before proceeding
• Save progress automatically
• Provide way to skip optional steps
• Show time estimate if possible
• Use descriptive step titles

Progress Indicators:

• Linear steps (1 → 2 → 3 → 4)
• Step labels with numbers
• Percentage completion
• Visual timeline

Accessibility:

• Use aria-label for step indicators
• Announce step changes
• Ensure keyboard navigation works
• Mark completed/current/upcoming steps

3. Inline Editing Pattern

Edit content directly in place without separate form.

When to Use:

• Spreadsheet-like interfaces
• Quick edits to existing content
• Data tables
• User profiles
• Settings pages

Interaction Modes:

• Click to Edit: Click field to make editable
• Always Editable: Fields always in edit mode
• Edit Button: Explicit button to enter edit mode
• Row/Item Edit: Edit entire row or item at once

Best Practices:

• Provide clear visual feedback for editable areas
• Show edit mode clearly (border, background change)
• Include Save/Cancel actions
• Auto-save on blur (optional)
• Validate before saving
• Show loading state during save
• Handle errors gracefully
• Keyboard shortcuts (Enter to save, Esc to cancel)

Visual States:

• Default: Shows content, hints at editability
• Hover: Indicate interactivity
• Edit: Clear input/editing interface
• Saving: Loading indicator
• Saved: Brief success confirmation

Accessibility:

• Use semantic HTML elements
• Provide clear labels
• Announce state changes
• Support keyboard-only interaction

4. Search Patterns

Autocomplete/Typeahead

Show suggestions as user types.

Best Practices:

• Debounce input (300ms delay)
• Highlight matching characters
• Show both recent and relevant results
• Limit number of suggestions (5-10)
• Allow keyboard navigation (arrows, Enter)
• Clear suggestions on Esc
• Show "No results" state
• Include search button as fallback

Accessibility:

• Use role="combobox" and aria-autocomplete
• Announce suggestion count
• Use aria-activedescendant for highlighted option
• Ensure screen reader support

Filtering

Narrow results based on criteria.

Types:

• Faceted Search: Multiple filter categories
• Tag Filters: Select/deselect tags
• Range Filters: Sliders for numeric ranges
• Date Filters: Date pickers or presets

Best Practices:

• Show active filters clearly
• Display result count
• Allow clearing individual or all filters
• Update results in real-time or with Apply button
• Preserve filter state in URL
• Provide filter presets for common queries

5. Form Layout Patterns

Single Column

Best for mobile and simplicity.

Advantages:

• Easier to scan vertically
• Better mobile experience
• Reduces cognitive load
• Higher completion rates

Multi-Column

Use for related fields or space efficiency.

Best Practices:

• Keep related fields together
• Left-align labels
• Use for short forms only
• Stack on mobile

Label Positioning

• Top Labels: Fastest completion, best for mobile
• Left Labels: Space-efficient, good for data entry
• Inline Labels: Placeholder-style (use carefully)

Data Display Patterns

1. Table Pattern

Display structured data in rows and columns.

When to Use:

• Comparing data across multiple dimensions
• Large datasets requiring sorting/filtering
• Detailed data requiring precision
• Admin interfaces and dashboards

Essential Features:

• Sorting: Click headers to sort columns
• Filtering: Search or filter by column
• Pagination: Handle large datasets
• Row Selection: Checkboxes for bulk actions
• Responsive: Adapt for mobile screens

Advanced Features:

• Column Resizing: Drag to adjust width
• Column Reordering: Rearrange columns
• Frozen Columns: Keep headers/first column visible
• Expandable Rows: Show additional details
• Inline Editing: Edit cells directly
• Export: Download as CSV/Excel

Best Practices:

• Left-align text, right-align numbers
• Use consistent formatting
• Highlight on hover
• Show loading states
• Handle empty states
• Provide clear sorting indicators
• Use zebra striping sparingly
• Avoid horizontal scrolling when possible

Responsive Strategies:

• Horizontal Scroll: Simple but less ideal
• Card View: Transform rows into cards
• Priority Columns: Hide less important columns
• Expandable Rows: Hide details until expanded
• Comparison View: Show 2-3 items side-by-side

Accessibility:

• Use semantic <table>, <thead>, <tbody>, <th>, <td>
• Add scope attribute to headers
• Provide table caption
• Use aria-sort for sortable columns
• Ensure keyboard navigation for interactive elements

2. Card Pattern

Container for related information with visual hierarchy.

When to Use:

• Product listings
• User profiles
• Dashboard widgets
• Content previews
• Mixed content types

Anatomy:

• Image/Visual: Hero image or icon
• Header: Title and metadata
• Body: Description or details
• Actions: Buttons or links
• Footer: Supplementary info

Variations:

• Product Card: Image, title, price, add to cart
• User Card: Avatar, name, bio, follow button
• Article Card: Thumbnail, headline, excerpt, read time
• Stat Card: Number, label, trend indicator

Best Practices:

• Consistent card sizes in grid
• Clear visual hierarchy
• Adequate padding and spacing
• Hover states for interactivity
• Limit actions to 1-2 primary actions
• Use subtle shadows for depth
• Ensure touch targets are large enough (44x44px min)

Grid Layouts:

• Responsive columns (1 on mobile, 2-4 on desktop)
• Equal height cards or masonry layout
• Consistent gaps between cards

Accessibility:

• Use semantic HTML
• Provide alt text for images
• Ensure sufficient contrast
• Make entire card clickable when appropriate
• Use heading tags for titles

3. List Pattern

Sequential display of similar items.

Types:

• Simple List: Text-only items
• Detailed List: Multiple lines per item
• Interactive List: Clickable/selectable items
• Grouped List: Organized by categories
• Inbox List: Messages with preview, time, status

Best Practices:

• Clear visual separation between items
• Consistent item height or natural flow
• Show item count
• Highlight selected items
• Provide quick actions
• Support multi-select when appropriate
• Implement virtual scrolling for long lists

Accessibility:

• Use semantic list elements (<ul>, <ol>, <li>)
• Provide unique IDs for items
• Announce selection changes
• Support keyboard navigation

4. Grid Pattern

Items arranged in rows and columns.

When to Use:

• Image galleries
• Product catalogs
• App launchers
• Icon sets
• Media libraries

Grid Types:

• Fixed Grid: Consistent item sizes
• Masonry: Variable heights, Pinterest-style
• Responsive Grid: Adapts to screen size

Best Practices:

• Use CSS Grid or Flexbox
• Maintain aspect ratios
• Implement lazy loading for images
• Provide grid/list view toggle
• Consistent gaps
• Handle empty states

Responsive Behavior:

Mobile: 1-2 columns
Tablet: 2-4 columns
Desktop: 4-6 columns

5. Dashboard Pattern

Overview of key metrics and data visualizations.

Components:

• KPI Cards: Key metrics with trends
• Charts: Line, bar, pie, area charts
• Tables: Detailed data
• Activity Feeds: Recent events
• Quick Actions: Common tasks

Layout Strategies:

• Fixed Layout: Predetermined positions
• Draggable Widgets: User-customizable
• Responsive Grid: Adapts to screen size

Best Practices:

• Prioritize most important metrics
• Use consistent timeframes
• Provide context (comparisons, trends)
• Enable drilling down for details
• Update data in real-time or show last update time
• Support customization
• Export/share capabilities

Feedback Patterns

1. Toast/Snackbar Pattern

Brief, temporary message about system state or action result.

When to Use:

• Confirm action completion (saved, deleted, sent)
• Show brief notifications
• Non-critical errors
• Undo opportunities

Best Practices:

• Display for 3-7 seconds
• Position consistently (bottom center or top right)
• One toast at a time, or queue multiple
• Provide dismiss action
• Avoid blocking important content
• Keep message concise
• Use appropriate colors (success: green, error: red, info: blue)
• Offer undo for destructive actions

Don't Use For:

• Critical errors requiring user action
• Information user must read
• Multiple simultaneous messages
• Long messages

Accessibility:

• Use role="status" or role="alert"
• Announce to screen readers
• Don't auto-dismiss too quickly
• Provide manual dismiss option

Example Structure:

<div class="toast" role="status" aria-live="polite">
  <span>Settings saved successfully</span>
  <button aria-label="Close notification">×</button>
</div>

2. Modal/Dialog Pattern

Overlay that focuses user attention on specific task or information.

Types:

• Alert Dialog: Important message requiring acknowledgment
• Confirmation Dialog: Yes/No decisions
• Form Dialog: Input collection
• Lightbox: Image/media viewer

When to Use:

• Critical decisions
• Focus on single task
• Collect required information
• Interrupt destructive actions
• Display full-size media

Best Practices:

• Dim background content (overlay)
• Disable background interaction
• Provide clear close option (X button, Cancel, Esc key)
• Focus first input or close button on open
• Return focus to trigger element on close
• Keep content concise
• Position in viewport center
• Prevent body scroll when open
• Avoid modal inception (modal within modal)

Accessibility:

• Use role="dialog" or role="alertdialog"
• Set aria-modal="true"
• Use aria-labelledby and aria-describedby
• Implement focus trap
• Support Esc to close
• Announce to screen readers

Structure:

<div class="modal-overlay">
  <div role="dialog" aria-modal="true" aria-labelledby="modal-title">
    <h2 id="modal-title">Confirm Deletion</h2>
    <p>Are you sure you want to delete this item?</p>
    <div class="modal-actions">
      <button>Cancel</button>
      <button class="danger">Delete</button>
    </div>
  </div>
</div>

3. Loading States Pattern

Indicate ongoing process or data fetching.

Types:

• Spinners: Circular or linear progress
• Progress Bars: Show completion percentage
• Skeleton Screens: Content placeholders
• Shimmer Effect: Animated placeholder
• Inline Loaders: Within buttons or sections

When to Use:

• Page loading
• API requests
• File uploads
• Background processing
• Infinite scroll loading

Best Practices:

• Show immediately (within 100ms)
• Indicate progress when possible
• Provide estimated time for long operations
• Allow cancellation when appropriate
• Use skeleton screens for better perceived performance
• Avoid blocking entire UI unnecessarily
• Show partial content as it loads

Skeleton Screens: Better UX than blank screens or spinners:

• Match layout of actual content
• Use subtle animation
• Load content progressively
• Maintain scroll position

Accessibility:

• Use aria-busy="true" during loading
• Announce loading completion
• Provide text alternative for visual loaders
• Ensure keyboard users can cancel

4. Empty States Pattern

Communicate when no content exists and guide next action.

Types:

• First Use: Guide new users
• No Results: Search/filter returned nothing
• Error State: Something went wrong
• Completed State: All tasks done

Components:

• Illustration: Visual element
• Heading: Clear message
• Description: Explanation and guidance
• Call-to-Action: Primary next step

Best Practices:

• Be encouraging and helpful
• Provide clear next action
• Use appropriate tone for context
• Include relevant illustration
• Make CTA prominent
• Offer alternatives or suggestions

Examples:

First Use:

"Welcome to your inbox!"
"You don't have any messages yet.
Why not invite your team?"
[Invite Team Button]

No Results:

"No results found for 'query'"
"Try different keywords or clear filters"
[Clear Filters Button]

Error:

"Oops, something went wrong"
"We couldn't load your data. Please try again."
[Retry Button]

Accessibility:

• Provide meaningful text
• Ensure images have alt text
• Make CTAs keyboard accessible

5. Notification Badge Pattern

Indicate unread items or pending actions.

Types:

• Numeric Badge: Show count (5, 12, 99+)
• Dot Badge: Indicate presence without count
• Status Badge: Online, offline, busy states

When to Use:

• Unread messages
• Pending notifications
• Cart item count
• User status indicators

Best Practices:

• Position consistently (top-right of icon)
• Use contrasting colors
• Limit numbers (99+ for large counts)
• Clear when viewed
• Don't overuse
• Size appropriately

Accessibility:

• Include in accessible name
• Announce updates to screen readers
• Example: aria-label="Messages (3 unread)"

Interaction Patterns

1. Drag and Drop Pattern

Move or reorder items by dragging.

Use Cases:

• File uploads
• List reordering
• Kanban boards
• Image galleries
• Form builders

Interaction States:

• Draggable: Visual indicator (handle icon)
• Dragging: Item follows cursor, original position shown
• Drop Zone: Highlight valid targets
• Invalid: Show when can't drop
• Dropped: Animate to final position

Best Practices:

• Provide clear drag handles
• Show drop zones clearly
• Animate transitions smoothly
• Support keyboard alternatives
• Confirm destructive drops
• Auto-scroll when dragging near edges
• Show preview of final state

Keyboard Alternative:

• Select item
• Cut/Copy
• Navigate to target
• Paste/Insert

Accessibility:

• Implement keyboard controls
• Announce drag/drop actions
• Provide alternative interaction method
• Use appropriate ARIA attributes

2. Infinite Scroll Pattern

Automatically load content as user scrolls down.

When to Use:

• Social media feeds
• Image galleries
• News feeds
• Product catalogs

Best Practices:

• Show loading indicator
• Provide "Load More" button as fallback
• Maintain scroll position on back navigation
• Include footer only after all content
• Allow jumping to specific items
• Show total count when possible
• Provide way to stop auto-loading

Accessibility Concerns:

• Announce new content to screen readers
• Ensure keyboard users can access all content
• Provide skip links
• Consider pagination alternative

Performance:

• Implement virtual scrolling for large lists
• Lazy load images
• Remove off-screen content
• Debounce scroll events

3. Filter and Sort Pattern

Refine and organize displayed data.

Filter Types:

• Checkboxes: Multi-select categories
• Radio Buttons: Single selection
• Range Sliders: Numeric ranges
• Date Pickers: Date ranges
• Search: Text matching

Sort Options:

• Alphabetical (A-Z, Z-A)
• Numeric (low-high, high-low)
• Date (newest, oldest)
• Relevance
• Popularity

Best Practices:

• Show active filters clearly
• Display result count
• Allow clearing individual filters
• Provide "Clear All" option
• Update results immediately or with Apply button
• Preserve filter state in URL
• Default to most useful sort
• Show sort direction clearly

Mobile Considerations:

• Use bottom sheet or sidebar for filters
• Provide filter button with count badge
• Allow applying filters before closing panel

4. Search Pattern

Help users find specific content or items.

Components:

• Search Input: Text field for query
• Search Button: Submit search
• Clear Button: Reset search
• Autocomplete: Suggestions while typing
• Recent Searches: Previously searched terms
• Filters: Refine results
• Results: Matching items

Best Practices:

• Make search prominent and easy to find
• Show search icon
• Provide keyboard shortcut (/, Ctrl+K)
• Show search scope if limited
• Highlight matching terms in results
• Show "No results" state with suggestions
• Preserve search in URL
• Implement debouncing (300ms)

Search UX:

• Instant search vs submit button
• Autocomplete suggestions
• Fuzzy matching for typos
• Search within results
• Sort by relevance

5. Undo/Redo Pattern

Reverse or replay actions.

When to Use:

• Content editors
• Drawing applications
• Email clients
• Any destructive action

Implementation:

• Immediate Undo: Toast with undo button
• Command Pattern: Stack of reversible actions
• Keyboard Shortcuts: Ctrl+Z, Ctrl+Y/Ctrl+Shift+Z
• Menu Options: Edit menu items

Best Practices:

• Provide undo for all significant actions
• Show undo option immediately (toast)
• Set reasonable time limit (5-10 seconds)
• Clear messaging about what will undo
• Support multiple undo levels
• Disable when no actions to undo
• Persist undo history appropriately

Accessibility Patterns

WCAG Principles

Perceivable: Information must be presentable to users in ways they can perceive.

• Provide text alternatives for non-text content
• Provide captions and alternatives for multimedia
• Create content that can be presented in different ways
• Make it easier to see and hear content

Operable: Interface components must be operable by all users.

• Make all functionality keyboard accessible
• Give users enough time to read and use content
• Don't design content that may cause seizures
• Help users navigate and find content

Understandable: Information and UI operation must be understandable.

• Make text readable and understandable
• Make content appear and operate in predictable ways
• Help users avoid and correct mistakes

Robust: Content must be robust enough to be interpreted by various user agents.

• Maximize compatibility with current and future tools

Keyboard Navigation

Essential Patterns:

• Tab: Move forward through interactive elements
• Shift+Tab: Move backward
• Enter/Space: Activate buttons and links
• Arrow Keys: Navigate within components (menus, tabs)
• Esc: Close dialogs, cancel actions
• Home/End: Jump to first/last item

Focus Management:

• Visible focus indicators (outline, highlight)
• Logical tab order (follows visual order)
• Focus trap in modals
• Return focus after closing dialogs
• Skip links for main content

Best Practices:

• Don't rely on hover-only interactions
• Ensure all interactive elements are keyboard accessible
• Provide keyboard shortcuts for common actions
• Document keyboard shortcuts
• Test with keyboard only

ARIA (Accessible Rich Internet Applications)

Roles: Define what an element is or does:

• role="button", role="tab", role="dialog"
• role="navigation", role="main", role="search"
• role="alert", role="status", role="log"

States and Properties:

• aria-expanded: Expandable elements (true/false)
• aria-selected: Selected items (true/false)
• aria-checked: Checkboxes (true/false/mixed)
• aria-disabled: Disabled state (true/false)
• aria-hidden: Hide from screen readers (true/false)
• aria-label: Accessible name
• aria-labelledby: Reference to labeling element
• aria-describedby: Reference to description
• aria-live: Announce dynamic changes (polite/assertive)
• aria-current: Current item in set (page/step/location)

Best Practices:

• Use semantic HTML first
• Add ARIA when semantic HTML isn't sufficient
• Don't override native semantics
• Keep ARIA attributes updated with UI state
• Test with screen readers

Screen Reader Support

Considerations:

• Logical heading hierarchy (h1, h2, h3...)
• Descriptive link text (avoid "click here")
• Alt text for images
• Labels for form inputs
• Error messages associated with inputs
• Announce dynamic content changes
• Provide text alternatives for visual information

Common Screen Readers:

• NVDA (Windows, free)
• JAWS (Windows, commercial)
• VoiceOver (macOS, iOS)
• TalkBack (Android)

Color and Contrast

Requirements:

• Text Contrast: 4.5:1 for normal text, 3:1 for large text (WCAG AA)
• Enhanced Contrast: 7:1 for normal, 4.5:1 for large (WCAG AAA)
• UI Components: 3:1 for interface elements and graphics

Best Practices:

• Don't rely on color alone to convey information
• Use patterns, icons, or text in addition to color
• Test with color blindness simulators
• Provide high contrast mode
• Ensure focus indicators have sufficient contrast

Form Accessibility

Labels:

• Associate <label> with inputs using for/id
• Don't use placeholder as only label
• Group related inputs with <fieldset> and <legend>

Validation:

• Associate errors with fields using aria-describedby
• Mark invalid fields with aria-invalid="true"
• Announce errors to screen readers with role="alert"
• Don't rely on color alone for validation states

Instructions:

• Provide clear instructions before form
• Indicate required fields
• Show format requirements
• Offer example inputs

Responsive Patterns

Mobile-First Approach

Design for mobile screens first, then enhance for larger screens.

Benefits:

• Forces focus on essential content
• Progressive enhancement
• Better performance on mobile
• Easier than desktop-first

Breakpoints:

/* Mobile: 320px - 767px (default) */

/* Tablet: 768px+ */
@media (min-width: 768px) { }

/* Desktop: 1024px+ */
@media (min-width: 1024px) { }

/* Large Desktop: 1440px+ */
@media (min-width: 1440px) { }

Adaptive Layouts

Fluid Grids:

• Use percentages or flexible units (fr, %)
• CSS Grid and Flexbox
• Container queries for component-level responsiveness

Flexible Images:

img {
  max-width: 100%;
  height: auto;
}

Responsive Typography:

• Relative units (rem, em)
• Fluid typography with clamp()
• Adjust line length for readability (45-75 characters)

Mobile Navigation Patterns

Hamburger Menu:

• Icon toggles slide-out menu
• Most common but can hide navigation
• Include label for clarity

Tab Bar:

• Fixed bottom navigation (iOS pattern)
• 3-5 main sections
• Always visible

Priority+:

• Show items that fit, hide overflow in menu
• Adapts to available space
• Good for primary navigation

Bottom Sheet:

• Slides up from bottom
• Good for filters, actions
• Easy thumb reach

Touch Interactions

Touch Targets:

• Minimum 44x44px tap targets
• Adequate spacing between targets
• Larger targets for primary actions

Gestures:

• Tap: Primary action
• Double Tap: Zoom (use carefully)
• Long Press: Show context menu
• Swipe: Delete, archive, navigate
• Pinch: Zoom
• Pull to Refresh: Update content

Best Practices:

• Provide visual feedback for touches
• Avoid hover-dependent interactions
• Support both portrait and landscape
• Consider thumb zones (easy, stretch, hard to reach)
• Test on actual devices

Responsive Tables

Strategies:

1. Horizontal Scroll: Simplest but least ideal 2. Priority Columns: Hide less important columns 3. Stacked Cards: Each row becomes a card 4. Flip Headers: Rotate headers to row labels 5. Comparison View: Show 2-3 items side by side

Example - Stacked Cards:

Desktop:
| Name | Email | Role | Status |

Mobile:
┌─────────────┐
│ John Doe    │
│ Email: j@   │
│ Role: Admin │
│ Status: ✓   │
└─────────────┘

Common UI Patterns Checklist

Button Patterns

• Primary action button (filled, high contrast)
• Secondary action button (outlined or ghost)
• Tertiary/text buttons for low priority actions
• Icon buttons for common actions
• Button groups for related actions
• Toggle buttons for on/off states
• Floating action button (FAB) for primary mobile action
• Loading state in buttons
• Disabled state with reduced opacity

Input Patterns

• Text input with label and placeholder
• Password input with show/hide toggle
• Search input with icon and clear button
• Textarea for multi-line input
• Select/dropdown for choosing from options
• Radio buttons for single selection from few options
• Checkboxes for multi-selection
• Toggle switch for on/off settings
• Date picker for date selection
• File upload with drag-and-drop
• Range slider for numeric input
• Color picker for color selection

Navigation Patterns

• Top navigation bar
• Sidebar navigation
• Breadcrumb navigation
• Pagination
• Tabs
• Stepper for multi-step processes
• Anchor links for in-page navigation
• Back to top button

Overlay Patterns

• Modal dialogs
• Slideover/drawer
• Popover for contextual information
• Tooltip for hints
• Dropdown menu
• Context menu (right-click)
• Bottom sheet (mobile)

Feedback Patterns

• Toast notifications
• Alert banners
• Inline messages
• Loading spinners
• Progress bars
• Skeleton screens
• Success/error states
• Empty states

Content Patterns

• Card layouts
• List views
• Grid layouts
• Table displays
• Timeline/activity feed
• Hero section
• Image gallery
• Carousel/slider
• Video player
• Avatar/profile picture

Design Tokens

Standardized design variables for consistency.

Color Tokens

Primary Colors:
- primary-50 to primary-900 (shades)

Semantic Colors:
- success (green)
- warning (yellow)
- error (red)
- info (blue)

Neutral Colors:
- gray-50 to gray-900

Text Colors:
- text-primary
- text-secondary
- text-disabled

Spacing Tokens

- spacing-xs: 4px
- spacing-sm: 8px
- spacing-md: 16px
- spacing-lg: 24px
- spacing-xl: 32px
- spacing-2xl: 48px

Typography Tokens

Font Sizes:
- text-xs: 12px
- text-sm: 14px
- text-base: 16px
- text-lg: 18px
- text-xl: 20px
- text-2xl: 24px

Font Weights:
- normal: 400
- medium: 500
- semibold: 600
- bold: 700

Line Heights:
- tight: 1.25
- normal: 1.5
- relaxed: 1.75

Border Radius Tokens

- rounded-none: 0
- rounded-sm: 2px
- rounded: 4px
- rounded-md: 6px
- rounded-lg: 8px
- rounded-xl: 12px
- rounded-full: 9999px

Shadow Tokens

- shadow-sm: subtle elevation
- shadow: default elevation
- shadow-md: medium elevation
- shadow-lg: large elevation
- shadow-xl: maximum elevation

Performance Considerations

Perceived Performance

• Show content immediately (skeleton screens)
• Progressive loading
• Optimistic UI updates
• Smooth animations (60fps)

Actual Performance

• Code splitting
• Lazy loading images and components
• Virtual scrolling for long lists
• Debouncing and throttling
• Caching strategies
• Minimize reflows and repaints

Image Optimization

• Appropriate formats (WebP, AVIF)
• Responsive images (srcset)
• Lazy loading
• Blur-up placeholder technique
• Proper sizing and compression

Testing UI Patterns

Usability Testing

• User interviews
• Task completion testing
• A/B testing
• Heat maps and click tracking
• Session recordings

Accessibility Testing

• Keyboard navigation testing
• Screen reader testing
• Color contrast checking
• Automated accessibility audits (axe, Lighthouse)
• Manual WCAG compliance review

Cross-browser Testing

• Test in major browsers (Chrome, Firefox, Safari, Edge)
• Test on actual devices
• Use browser dev tools for responsive testing
• Check for progressive enhancement

Performance Testing

• Lighthouse audits
• Core Web Vitals
• Loading time testing
• Interaction latency
• Animation frame rates

Resources and Tools

Design Systems

• Material Design (Google)
• Human Interface Guidelines (Apple)
• Fluent Design (Microsoft)
• Polaris (Shopify)
• Carbon (IBM)
• Ant Design
• Atlassian Design System

Component Libraries

• Shadcn UI
• Radix UI
• Headless UI
• Chakra UI
• MUI (Material-UI)
• Ant Design
• Bootstrap
• Tailwind UI

Accessibility Tools

• axe DevTools
• WAVE
• Lighthouse
• NVDA (screen reader)
• VoiceOver (screen reader)
• Color contrast checkers

Prototyping Tools

• Figma
• Sketch
• Adobe XD
• Framer
• InVision

Pattern Libraries

• UI Patterns
• Patternry
• Mobile Patterns
• Pttrns

Conclusion

UI design patterns provide proven solutions to common interface challenges. By understanding and applying these patterns appropriately, you can create:

• Consistent Interfaces: Familiar patterns reduce learning curve
• Accessible Experiences: Built-in accessibility considerations
• Efficient Development: Reusable components and standardized approaches
• Better UX: Tested patterns that users understand

Remember:

• Choose patterns appropriate for your context
• Customize patterns to fit your brand and users
• Test with real users
• Prioritize accessibility
• Stay updated with evolving best practices
• Focus on user needs over trends

UI patterns are guidelines, not strict rules. Adapt them thoughtfully to create interfaces that serve your users effectively.

UI Design Patterns - Implementation Examples

Detailed implementation examples for common UI design patterns with HTML, CSS, and JavaScript code samples.

Table of Contents

1. Navigation Patterns 2. Form Patterns 3. Data Display Patterns 4. Feedback Patterns 5. Interaction Patterns 6. Accessibility Examples 7. Responsive Patterns

Navigation Patterns

Example 1: Accessible Tab Component

A fully accessible tab component with keyboard navigation and ARIA attributes.

HTML Structure:

<div class="tabs-container">
  <div role="tablist" aria-label="Account settings">
    <button
      role="tab"
      aria-selected="true"
      aria-controls="profile-panel"
      id="profile-tab"
      tabindex="0"
    >
      <svg aria-hidden="true"><!-- Profile icon --></svg>
      Profile
    </button>
    <button
      role="tab"
      aria-selected="false"
      aria-controls="security-panel"
      id="security-tab"
      tabindex="-1"
    >
      <svg aria-hidden="true"><!-- Lock icon --></svg>
      Security
    </button>
    <button
      role="tab"
      aria-selected="false"
      aria-controls="notifications-panel"
      id="notifications-tab"
      tabindex="-1"
    >
      <svg aria-hidden="true"><!-- Bell icon --></svg>
      Notifications
    </button>
  </div>

  <div
    role="tabpanel"
    id="profile-panel"
    aria-labelledby="profile-tab"
    tabindex="0"
  >
    <h2>Profile Settings</h2>
    <p>Manage your profile information and preferences.</p>
    <!-- Profile form content -->
  </div>

  <div
    role="tabpanel"
    id="security-panel"
    aria-labelledby="security-tab"
    hidden
    tabindex="0"
  >
    <h2>Security Settings</h2>
    <p>Update your password and security preferences.</p>
    <!-- Security form content -->
  </div>

  <div
    role="tabpanel"
    id="notifications-panel"
    aria-labelledby="notifications-tab"
    hidden
    tabindex="0"
  >
    <h2>Notification Preferences</h2>
    <p>Choose how and when you want to be notified.</p>
    <!-- Notification settings -->
  </div>
</div>

CSS Styling:

.tabs-container {
  max-width: 800px;
  margin: 2rem auto;
}

[role="tablist"] {
  display: flex;
  gap: 0.5rem;
  border-bottom: 2px solid #e5e7eb;
  margin-bottom: 1.5rem;
}

[role="tab"] {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.2s;
}

[role="tab"]:hover {
  color: #374151;
  background-color: #f9fafb;
}

[role="tab"][aria-selected="true"] {
  color: #2563eb;
  border-bottom-color: #2563eb;
}

[role="tab"]:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
  border-radius: 4px;
}

[role="tab"] svg {
  width: 1.25rem;
  height: 1.25rem;
}

[role="tabpanel"] {
  padding: 1.5rem;
  animation: fadeIn 0.3s ease-in;
}

[role="tabpanel"]:focus {
  outline: 2px solid #2563eb;
  outline-offset: 4px;
  border-radius: 4px;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

JavaScript Implementation:

class TabComponent {
  constructor(container) {
    this.container = container;
    this.tablist = container.querySelector('[role="tablist"]');
    this.tabs = Array.from(this.tablist.querySelectorAll('[role="tab"]'));
    this.panels = Array.from(container.querySelectorAll('[role="tabpanel"]'));

    this.initTabs();
  }

  initTabs() {
    this.tabs.forEach((tab, index) => {
      tab.addEventListener('click', () => this.selectTab(index));
      tab.addEventListener('keydown', (e) => this.handleKeyboard(e, index));
    });
  }

  selectTab(index) {
    // Update tabs
    this.tabs.forEach((tab, i) => {
      const isSelected = i === index;
      tab.setAttribute('aria-selected', isSelected);
      tab.tabIndex = isSelected ? 0 : -1;
    });

    // Update panels
    this.panels.forEach((panel, i) => {
      if (i === index) {
        panel.hidden = false;
      } else {
        panel.hidden = true;
      }
    });

    // Focus the selected tab
    this.tabs[index].focus();
  }

  handleKeyboard(event, currentIndex) {
    let newIndex = currentIndex;

    switch(event.key) {
      case 'ArrowRight':
        newIndex = (currentIndex + 1) % this.tabs.length;
        break;
      case 'ArrowLeft':
        newIndex = (currentIndex - 1 + this.tabs.length) % this.tabs.length;
        break;
      case 'Home':
        newIndex = 0;
        break;
      case 'End':
        newIndex = this.tabs.length - 1;
        break;
      default:
        return;
    }

    event.preventDefault();
    this.selectTab(newIndex);
  }
}

// Initialize
document.addEventListener('DOMContentLoaded', () => {
  const tabContainers = document.querySelectorAll('.tabs-container');
  tabContainers.forEach(container => new TabComponent(container));
});

Example 2: Responsive Accordion

Collapsible sections with smooth animations and accessibility.

HTML:

<div class="accordion">
  <div class="accordion-item">
    <h3 class="accordion-header">
      <button
        aria-expanded="false"
        aria-controls="section-1"
        id="accordion-button-1"
      >
        <span>What is your return policy?</span>
        <svg class="accordion-icon" aria-hidden="true">
          <!-- Chevron down icon -->
          <path d="M5 7l7 7 7-7" stroke="currentColor" />
        </svg>
      </button>
    </h3>
    <div
      id="section-1"
      role="region"
      aria-labelledby="accordion-button-1"
      class="accordion-panel"
      hidden
    >
      <p>We offer a 30-day return policy on all items. Products must be in original condition with tags attached.</p>
    </div>
  </div>

  <div class="accordion-item">
    <h3 class="accordion-header">
      <button
        aria-expanded="false"
        aria-controls="section-2"
        id="accordion-button-2"
      >
        <span>How long does shipping take?</span>
        <svg class="accordion-icon" aria-hidden="true">
          <path d="M5 7l7 7 7-7" stroke="currentColor" />
        </svg>
      </button>
    </h3>
    <div
      id="section-2"
      role="region"
      aria-labelledby="accordion-button-2"
      class="accordion-panel"
      hidden
    >
      <p>Standard shipping typically takes 5-7 business days. Expedited shipping options are available at checkout.</p>
    </div>
  </div>

  <div class="accordion-item">
    <h3 class="accordion-header">
      <button
        aria-expanded="false"
        aria-controls="section-3"
        id="accordion-button-3"
      >
        <span>Do you offer international shipping?</span>
        <svg class="accordion-icon" aria-hidden="true">
          <path d="M5 7l7 7 7-7" stroke="currentColor" />
        </svg>
      </button>
    </h3>
    <div
      id="section-3"
      role="region"
      aria-labelledby="accordion-button-3"
      class="accordion-panel"
      hidden
    >
      <p>Yes, we ship to over 50 countries worldwide. Shipping costs and delivery times vary by location.</p>
    </div>
  </div>
</div>

CSS:

.accordion {
  max-width: 800px;
  margin: 0 auto;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
}

.accordion-item {
  border-bottom: 1px solid #e5e7eb;
}

.accordion-item:last-child {
  border-bottom: none;
}

.accordion-header {
  margin: 0;
}

.accordion-header button {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  background: white;
  border: none;
  font-size: 1rem;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.2s;
}

.accordion-header button:hover {
  background-color: #f9fafb;
}

.accordion-header button:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: -2px;
  z-index: 1;
}

.accordion-icon {
  width: 1.25rem;
  height: 1.25rem;
  transition: transform 0.3s ease;
  flex-shrink: 0;
  margin-left: 1rem;
}

.accordion-header button[aria-expanded="true"] .accordion-icon {
  transform: rotate(180deg);
}

.accordion-panel {
  overflow: hidden;
  transition: height 0.3s ease;
}

.accordion-panel[hidden] {
  display: none;
}

.accordion-panel p {
  padding: 0 1.5rem 1.25rem;
  margin: 0;
  color: #6b7280;
  line-height: 1.6;
}

JavaScript:

class Accordion {
  constructor(element, allowMultiple = false) {
    this.accordion = element;
    this.allowMultiple = allowMultiple;
    this.buttons = Array.from(element.querySelectorAll('.accordion-header button'));

    this.init();
  }

  init() {
    this.buttons.forEach(button => {
      button.addEventListener('click', () => this.toggle(button));
    });
  }

  toggle(button) {
    const expanded = button.getAttribute('aria-expanded') === 'true';
    const panel = document.getElementById(button.getAttribute('aria-controls'));

    if (!this.allowMultiple) {
      // Close all other panels
      this.buttons.forEach(btn => {
        if (btn !== button) {
          btn.setAttribute('aria-expanded', 'false');
          const otherPanel = document.getElementById(btn.getAttribute('aria-controls'));
          otherPanel.hidden = true;
        }
      });
    }

    // Toggle current panel
    button.setAttribute('aria-expanded', !expanded);
    panel.hidden = expanded;
  }
}

// Initialize
document.addEventListener('DOMContentLoaded', () => {
  const accordions = document.querySelectorAll('.accordion');
  accordions.forEach(acc => new Accordion(acc, false));
});

Example 3: Breadcrumb Navigation

HTML:

<nav aria-label="Breadcrumb">
  <ol class="breadcrumb">
    <li>
      <a href="/">
        <svg aria-hidden="true" class="home-icon"><!-- Home icon --></svg>
        <span class="sr-only">Home</span>
      </a>
    </li>
    <li>
      <span class="separator" aria-hidden="true">/</span>
      <a href="/products">Products</a>
    </li>
    <li>
      <span class="separator" aria-hidden="true">/</span>
      <a href="/products/electronics">Electronics</a>
    </li>
    <li>
      <span class="separator" aria-hidden="true">/</span>
      <span aria-current="page">Laptops</span>
    </li>
  </ol>
</nav>

CSS:

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  list-style: none;
  margin: 0;
  padding: 1rem 0;
  font-size: 0.875rem;
}

.breadcrumb li {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.breadcrumb a {
  color: #2563eb;
  text-decoration: none;
  transition: color 0.2s;
}

.breadcrumb a:hover {
  color: #1d4ed8;
  text-decoration: underline;
}

.breadcrumb a:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
  border-radius: 2px;
}

.breadcrumb [aria-current="page"] {
  color: #6b7280;
  font-weight: 500;
}

.separator {
  color: #9ca3af;
}

.home-icon {
  width: 1rem;
  height: 1rem;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Mobile responsiveness */
@media (max-width: 640px) {
  .breadcrumb {
    font-size: 0.75rem;
  }

  /* Hide middle items on mobile, show only first and last */
  .breadcrumb li:not(:first-child):not(:last-child) {
    display: none;
  }

  /* Show ellipsis for hidden items */
  .breadcrumb li:nth-child(2)::before {
    content: '...';
    color: #9ca3af;
    margin: 0 0.25rem;
  }
}

Form Patterns

Example 4: Form Validation with Real-time Feedback

HTML:

<form class="contact-form" novalidate>
  <div class="form-group">
    <label for="name">
      Full Name <span class="required" aria-label="required">*</span>
    </label>
    <input
      type="text"
      id="name"
      name="name"
      required
      aria-describedby="name-error"
      autocomplete="name"
    />
    <div id="name-error" class="error-message" role="alert" aria-live="polite"></div>
    <div class="success-message" aria-live="polite"></div>
  </div>

  <div class="form-group">
    <label for="email">
      Email Address <span class="required" aria-label="required">*</span>
    </label>
    <input
      type="email"
      id="email"
      name="email"
      required
      aria-describedby="email-error email-hint"
      autocomplete="email"
    />
    <div id="email-hint" class="hint-text">We'll never share your email.</div>
    <div id="email-error" class="error-message" role="alert" aria-live="polite"></div>
    <div class="success-message" aria-live="polite"></div>
  </div>

  <div class="form-group">
    <label for="phone">
      Phone Number
    </label>
    <input
      type="tel"
      id="phone"
      name="phone"
      pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}"
      aria-describedby="phone-hint phone-error"
      autocomplete="tel"
    />
    <div id="phone-hint" class="hint-text">Format: 123-456-7890</div>
    <div id="phone-error" class="error-message" role="alert" aria-live="polite"></div>
  </div>

  <div class="form-group">
    <label for="message">
      Message <span class="required" aria-label="required">*</span>
    </label>
    <textarea
      id="message"
      name="message"
      rows="5"
      required
      minlength="10"
      aria-describedby="message-error message-counter"
    ></textarea>
    <div id="message-counter" class="character-counter">0 / 500</div>
    <div id="message-error" class="error-message" role="alert" aria-live="polite"></div>
  </div>

  <button type="submit" class="submit-button">
    <span class="button-text">Send Message</span>
    <span class="button-loader" hidden>
      <svg class="spinner" aria-hidden="true"><!-- Loading spinner --></svg>
      Sending...
    </span>
  </button>
</form>

CSS:

.contact-form {
  max-width: 600px;
  margin: 0 auto;
  padding: 2rem;
}

.form-group {
  margin-bottom: 1.5rem;
}

label {
  display: block;
  margin-bottom: 0.5rem;
  font-weight: 500;
  color: #374151;
}

.required {
  color: #dc2626;
}

input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
  width: 100%;
  padding: 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 1rem;
  transition: all 0.2s;
}

input:focus,
textarea:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

input[aria-invalid="true"],
textarea[aria-invalid="true"] {
  border-color: #dc2626;
}

input[aria-invalid="true"]:focus,
textarea[aria-invalid="true"]:focus {
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1);
}

.form-group.valid input,
.form-group.valid textarea {
  border-color: #10b981;
}

.hint-text {
  margin-top: 0.375rem;
  font-size: 0.875rem;
  color: #6b7280;
}

.error-message {
  margin-top: 0.375rem;
  font-size: 0.875rem;
  color: #dc2626;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.error-message::before {
  content: '⚠';
  font-size: 1rem;
}

.success-message {
  margin-top: 0.375rem;
  font-size: 0.875rem;
  color: #10b981;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.success-message::before {
  content: '✓';
  font-size: 1rem;
}

.character-counter {
  margin-top: 0.375rem;
  font-size: 0.875rem;
  color: #6b7280;
  text-align: right;
}

.submit-button {
  width: 100%;
  padding: 0.875rem 1.5rem;
  background-color: #2563eb;
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s;
}

.submit-button:hover:not(:disabled) {
  background-color: #1d4ed8;
}

.submit-button:disabled {
  background-color: #9ca3af;
  cursor: not-allowed;
}

.submit-button:focus-visible {
  outline: 2px solid #2563eb;
  outline-offset: 2px;
}

.button-loader {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.spinner {
  width: 1rem;
  height: 1rem;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

JavaScript:

class FormValidator {
  constructor(form) {
    this.form = form;
    this.fields = {
      name: form.querySelector('#name'),
      email: form.querySelector('#email'),
      phone: form.querySelector('#phone'),
      message: form.querySelector('#message')
    };

    this.init();
  }

  init() {
    // Validate on blur
    Object.values(this.fields).forEach(field => {
      field.addEventListener('blur', () => this.validateField(field));
      field.addEventListener('input', () => {
        if (field.getAttribute('aria-invalid') === 'true') {
          this.validateField(field);
        }
      });
    });

    // Character counter for message
    this.fields.message.addEventListener('input', (e) => {
      const counter = document.getElementById('message-counter');
      counter.textContent = `${e.target.value.length} / 500`;

      if (e.target.value.length > 500) {
        counter.style.color = '#dc2626';
      } else {
        counter.style.color = '#6b7280';
      }
    });

    // Form submission
    this.form.addEventListener('submit', (e) => this.handleSubmit(e));
  }

  validateField(field) {
    const errorElement = document.getElementById(`${field.id}-error`);
    const formGroup = field.closest('.form-group');
    let errorMessage = '';

    // Required validation
    if (field.hasAttribute('required') && !field.value.trim()) {
      errorMessage = `${field.labels[0].textContent.replace('*', '').trim()} is required`;
    }
    // Email validation
    else if (field.type === 'email' && field.value) {
      const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
      if (!emailRegex.test(field.value)) {
        errorMessage = 'Please enter a valid email address';
      }
    }
    // Phone validation
    else if (field.type === 'tel' && field.value) {
      const phoneRegex = /^\d{3}-\d{3}-\d{4}$/;
      if (!phoneRegex.test(field.value)) {
        errorMessage = 'Please enter a valid phone number (123-456-7890)';
      }
    }
    // Min length validation
    else if (field.hasAttribute('minlength') && field.value) {
      const minLength = parseInt(field.getAttribute('minlength'));
      if (field.value.length < minLength) {
        errorMessage = `Must be at least ${minLength} characters`;
      }
    }

    // Update UI
    if (errorMessage) {
      field.setAttribute('aria-invalid', 'true');
      errorElement.textContent = errorMessage;
      formGroup.classList.remove('valid');
    } else if (field.value) {
      field.setAttribute('aria-invalid', 'false');
      errorElement.textContent = '';
      formGroup.classList.add('valid');
    } else {
      field.removeAttribute('aria-invalid');
      errorElement.textContent = '';
      formGroup.classList.remove('valid');
    }

    return !errorMessage;
  }

  async handleSubmit(e) {
    e.preventDefault();

    // Validate all fields
    let isValid = true;
    Object.values(this.fields).forEach(field => {
      if (!this.validateField(field)) {
        isValid = false;
      }
    });

    if (!isValid) {
      // Focus first invalid field
      const firstInvalid = this.form.querySelector('[aria-invalid="true"]');
      if (firstInvalid) {
        firstInvalid.focus();
      }
      return;
    }

    // Show loading state
    const button = this.form.querySelector('.submit-button');
    const buttonText = button.querySelector('.button-text');
    const buttonLoader = button.querySelector('.button-loader');

    button.disabled = true;
    buttonText.hidden = true;
    buttonLoader.hidden = false;

    // Simulate API call
    try {
      await new Promise(resolve => setTimeout(resolve, 2000));

      // Success - show message and reset form
      alert('Message sent successfully!');
      this.form.reset();

      // Clear validation states
      Object.values(this.fields).forEach(field => {
        field.removeAttribute('aria-invalid');
        field.closest('.form-group').classList.remove('valid');
      });

    } catch (error) {
      alert('Error sending message. Please try again.');
    } finally {
      button.disabled = false;
      buttonText.hidden = false;
      buttonLoader.hidden = true;
    }
  }
}

// Initialize
document.addEventListener('DOMContentLoaded', () => {
  const form = document.querySelector('.contact-form');
  if (form) {
    new FormValidator(form);
  }
});

Example 5: Multi-Step Form with Progress Indicator

HTML:

<div class="multi-step-form">
  <!-- Progress Indicator -->
  <div class="progress-steps" role="tablist" aria-label="Form progress">
    <div class="step active" role="tab" aria-selected="true">
      <div class="step-number">1</div>
      <div class="step-label">Account</div>
    </div>
    <div class="step-connector"></div>
    <div class="step" role="tab" aria-selected="false">
      <div class="step-number">2</div>
      <div class="step-label">Profile</div>
    </div>
    <div class="step-connector"></div>
    <div class="step" role="tab" aria-selected="false">
      <div class="step-number">3</div>
      <div class="step-label">Preferences</div>
    </div>
    <div class="step-connector"></div>
    <div class="step" role="tab" aria-selected="false">
      <div class="step-number">4</div>
      <div class="step-label">Review</div>
    </div>
  </div>

  <form id="registration-form">
    <!-- Step 1: Account -->
    <div class="form-step active" data-step="1">
      <h2>Create Your Account</h2>
      <div class="form-group">
        <label for="username">Username</label>
        <input type="text" id="username" required />
      </div>
      <div class="form-group">
        <label for="email-step">Email</label>
        <input type="email" id="email-step" required />
      </div>
      <div class="form-group">
        <label for="password">Password</label>
        <input type="password" id="password" required />
      </div>
    </div>

    <!-- Step 2: Profile -->
    <div class="form-step" data-step="2" hidden>
      <h2>Your Profile</h2>
      <div class="form-group">
        <label for="firstName">First Name</label>
        <input type="text" id="firstName" required />
      </div>
      <div class="form-group">
        <label for="lastName">Last Name</label>
        <input type="text" id="lastName" required />
      </div>
      <div class="form-group">
        <label for="bio">Bio</label>
        <textarea id="bio" rows="4"></textarea>
      </div>
    </div>

    <!-- Step 3: Preferences -->
    <div class="form-step" data-step="3" hidden>
      <h2>Your Preferences</h2>
      <fieldset>
        <legend>Notification Settings</legend>
        <div class="checkbox-group">
          <input type="checkbox" id="emailNotif" />
          <label for="emailNotif">Email notifications</label>
        </div>
        <div class="checkbox-group">
          <input type="checkbox" id="smsNotif" />
          <label for="smsNotif">SMS notifications</label>
        </div>
      </fieldset>
    </div>

    <!-- Step 4: Review -->
    <div class="form-step" data-step="4" hidden>
      <h2>Review & Confirm</h2>
      <div id="review-content"></div>
    </div>

    <!-- Navigation Buttons -->
    <div class="form-navigation">
      <button type="button" class="btn-secondary" id="prevBtn" hidden>
        Previous
      </button>
      <button type="button" class="btn-primary" id="nextBtn">
        Next
      </button>
      <button type="submit" class="btn-primary" id="submitBtn" hidden>
        Submit
      </button>
    </div>
  </form>
</div>

CSS:

.multi-step-form {
  max-width: 700px;
  margin: 2rem auto;
  padding: 2rem;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Progress Steps */
.progress-steps {
  display: flex;
  align-items: center;
  margin-bottom: 3rem;
  padding: 0 1rem;
}

.step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  flex: 1;
}

.step-number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #e5e7eb;
  color: #6b7280;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  transition: all 0.3s;
}

.step.active .step-number {
  background: #2563eb;
  color: white;
}

.step.completed .step-number {
  background: #10b981;
  color: white;
}

.step-label {
  font-size: 0.875rem;
  color: #6b7280;
  font-weight: 500;
}

.step.active .step-label {
  color: #2563eb;
  font-weight: 600;
}

.step-connector {
  flex: 1;
  height: 2px;
  background: #e5e7eb;
  margin: 0 -1rem;
  margin-bottom: 1.75rem;
}

.step.completed + .step-connector {
  background: #10b981;
}

/* Form Steps */
.form-step {
  animation: slideIn 0.3s ease-out;
}

@keyframes slideIn {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.form-step h2 {
  margin-bottom: 1.5rem;
  color: #111827;
}

/* Form Navigation */
.form-navigation {
  display: flex;
  justify-content: space-between;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid #e5e7eb;
}

.btn-primary,
.btn-secondary {
  padding: 0.75rem 2rem;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
}

.btn-primary {
  background: #2563eb;
  color: white;
}

.btn-primary:hover {
  background: #1d4ed8;
}

.btn-secondary {
  background: white;
  color: #374151;
  border: 1px solid #d1d5db;
}

.btn-secondary:hover {
  background: #f9fafb;
}

/* Review Section */
#review-content {
  background: #f9fafb;
  padding: 1.5rem;
  border-radius: 8px;
}

#review-content dl {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 1rem;
  margin: 0;
}

#review-content dt {
  font-weight: 600;
  color: #374151;
}

#review-content dd {
  margin: 0;
  color: #6b7280;
}

/* Mobile responsiveness */
@media (max-width: 640px) {
  .progress-steps {
    padding: 0;
  }

  .step-label {
    display: none;
  }

  .step-number {
    width: 32px;
    height: 32px;
    font-size: 0.875rem;
  }
}

JavaScript:

class MultiStepForm {
  constructor(container) {
    this.container = container;
    this.form = container.querySelector('form');
    this.steps = Array.from(container.querySelectorAll('.form-step'));
    this.stepIndicators = Array.from(container.querySelectorAll('.progress-steps .step'));
    this.currentStep = 0;
    this.formData = {};

    this.prevBtn = container.querySelector('#prevBtn');
    this.nextBtn = container.querySelector('#nextBtn');
    this.submitBtn = container.querySelector('#submitBtn');

    this.init();
  }

  init() {
    this.prevBtn.addEventListener('click', () => this.goToStep(this.currentStep - 1));
    this.nextBtn.addEventListener('click', () => this.handleNext());
    this.submitBtn.addEventListener('click', (e) => this.handleSubmit(e));
  }

  goToStep(stepIndex) {
    if (stepIndex < 0 || stepIndex >= this.steps.length) return;

    // Hide current step
    this.steps[this.currentStep].hidden = true;
    this.steps[this.currentStep].classList.remove('active');

    // Show new step
    this.currentStep = stepIndex;
    this.steps[this.currentStep].hidden = false;
    this.steps[this.currentStep].classList.add('active');

    // Update progress indicators
    this.updateStepIndicators();

    // Update buttons
    this.updateButtons();

    // Special handling for review step
    if (stepIndex === this.steps.length - 1) {
      this.populateReview();
    }
  }

  handleNext() {
    // Validate current step
    const currentStepElement = this.steps[this.currentStep];
    const inputs = currentStepElement.querySelectorAll('input, textarea, select');
    let isValid = true;

    inputs.forEach(input => {
      if (input.hasAttribute('required') && !input.value.trim()) {
        isValid = false;
        input.setAttribute('aria-invalid', 'true');
      } else {
        input.setAttribute('aria-invalid', 'false');
      }
    });

    if (!isValid) {
      alert('Please fill in all required fields');
      return;
    }

    // Save current step data
    this.saveStepData();

    // Mark step as completed
    this.stepIndicators[this.currentStep].classList.add('completed');

    // Go to next step
    this.goToStep(this.currentStep + 1);
  }

  saveStepData() {
    const currentStepElement = this.steps[this.currentStep];
    const inputs = currentStepElement.querySelectorAll('input, textarea, select');

    inputs.forEach(input => {
      if (input.type === 'checkbox') {
        this.formData[input.id] = input.checked;
      } else {
        this.formData[input.id] = input.value;
      }
    });
  }

  populateReview() {
    const reviewContent = document.getElementById('review-content');

    const html = `
      <dl>
        <dt>Username:</dt>
        <dd>${this.formData.username || 'Not provided'}</dd>

        <dt>Email:</dt>
        <dd>${this.formData['email-step'] || 'Not provided'}</dd>

        <dt>Name:</dt>
        <dd>${this.formData.firstName} ${this.formData.lastName}</dd>

        <dt>Bio:</dt>
        <dd>${this.formData.bio || 'Not provided'}</dd>

        <dt>Email Notifications:</dt>
        <dd>${this.formData.emailNotif ? 'Enabled' : 'Disabled'}</dd>

        <dt>SMS Notifications:</dt>
        <dd>${this.formData.smsNotif ? 'Enabled' : 'Disabled'}</dd>
      </dl>
    `;

    reviewContent.innerHTML = html;
  }

  updateStepIndicators() {
    this.stepIndicators.forEach((indicator, index) => {
      if (index === this.currentStep) {
        indicator.classList.add('active');
        indicator.setAttribute('aria-selected', 'true');
      } else {
        indicator.classList.remove('active');
        indicator.setAttribute('aria-selected', 'false');
      }
    });
  }

  updateButtons() {
    // Previous button
    this.prevBtn.hidden = this.currentStep === 0;

    // Next/Submit buttons
    if (this.currentStep === this.steps.length - 1) {
      this.nextBtn.hidden = true;
      this.submitBtn.hidden = false;
    } else {
      this.nextBtn.hidden = false;
      this.submitBtn.hidden = true;
    }
  }

  handleSubmit(e) {
    e.preventDefault();
    console.log('Form submitted:', this.formData);
    alert('Registration complete! Check console for form data.');

    // Reset form
    this.form.reset();
    this.formData = {};
    this.stepIndicators.forEach(indicator => indicator.classList.remove('completed'));
    this.goToStep(0);
  }
}

// Initialize
document.addEventListener('DOMContentLoaded', () => {
  const multiStepForm = document.querySelector('.multi-step-form');
  if (multiStepForm) {
    new MultiStepForm(multiStepForm);
  }
});

Data Display Patterns

Example 6: Responsive Data Table

HTML:

<div class="table-container">
  <div class="table-header">
    <h2>User Management</h2>
    <div class="table-actions">
      <input
        type="search"
        placeholder="Search users..."
        aria-label="Search users"
        class="table-search"
      />
      <button class="btn-primary">Add User</button>
    </div>
  </div>

  <div class="table-responsive">
    <table role="table" aria-label="User list">
      <thead>
        <tr>
          <th scope="col">
            <input type="checkbox" aria-label="Select all users" />
          </th>
          <th scope="col">
            <button class="sort-button" data-column="name" aria-sort="none">
              Name
              <span class="sort-icon" aria-hidden="true">⇅</span>
            </button>
          </th>
          <th scope="col">
            <button class="sort-button" data-column="email" aria-sort="none">
              Email
              <span class="sort-icon" aria-hidden="true">⇅</span>
            </button>
          </th>
          <th scope="col">
            <button class="sort-button" data-column="role" aria-sort="none">
              Role
              <span class="sort-icon" aria-hidden="true">⇅</span>
            </button>
          </th>
          <th scope="col">
            <button class="sort-button" data-column="status" aria-sort="none">
              Status
              <span class="sort-icon" aria-hidden="true">⇅</span>
            </button>
          </th>
          <th scope="col">Actions</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td data-label="">
            <input type="checkbox" aria-label="Select John Doe" />
          </td>
          <td data-label="Name">John Doe</td>
          <td data-label="Email">john.doe@example.com</td>
          <td data-label="Role">Administrator</td>
          <td data-label="Status">
            <span class="status-badge active">Active</span>
          </td>
          <td data-label="Actions">
            <button class="icon-button" aria-label="Edit John Doe">
              <svg><!-- Edit icon --></svg>
            </button>
            <button class="icon-button" aria-label="Delete John Doe">
              <svg><!-- Delete icon --></svg>
            </button>
          </td>
        </tr>
        <!-- More rows... -->
      </tbody>
    </table>
  </div>

  <div class="table-footer">
    <div class="table-info">
      Showing 1-10 of 47 users
    </div>
    <nav class="pagination" aria-label="Table pagination">
      <button disabled aria-label="Previous page">Previous</button>
      <button aria-current="page">1</button>
      <button>2</button>
      <button>3</button>
      <button aria-label="Next page">Next</button>
    </nav>
  </div>
</div>

CSS:

.table-container {
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.table-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem;
  border-bottom: 1px solid #e5e7eb;
}

.table-header h2 {
  margin: 0;
  font-size: 1.25rem;
  color: #111827;
}

.table-actions {
  display: flex;
  gap: 1rem;
  align-items: center;
}

.table-search {
  padding: 0.5rem 1rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  min-width: 250px;
}

.table-responsive {
  overflow-x: auto;
}

table {
  width: 100%;
  border-collapse: collapse;
}

thead {
  background: #f9fafb;
  border-bottom: 2px solid #e5e7eb;
}

th {
  padding: 0.75rem 1rem;
  text-align: left;
  font-weight: 600;
  color: #374151;
  font-size: 0.875rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sort-button {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  padding: 0;
  font: inherit;
  cursor: pointer;
  color: inherit;
}

.sort-button:hover {
  color: #2563eb;
}

.sort-icon {
  opacity: 0.5;
}

.sort-button[aria-sort="ascending"] .sort-icon::before {
  content: '↑';
}

.sort-button[aria-sort="descending"] .sort-icon::before {
  content: '↓';
}

tbody tr {
  border-bottom: 1px solid #e5e7eb;
  transition: background-color 0.2s;
}

tbody tr:hover {
  background-color: #f9fafb;
}

td {
  padding: 1rem;
  color: #6b7280;
}

.status-badge {
  display: inline-block;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
}

.status-badge.active {
  background: #d1fae5;
  color: #065f46;
}

.icon-button {
  padding: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  color: #6b7280;
  transition: color 0.2s;
}

.icon-button:hover {
  color: #2563eb;
}

.table-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.5rem;
  border-top: 1px solid #e5e7eb;
}

.table-info {
  font-size: 0.875rem;
  color: #6b7280;
}

.pagination {
  display: flex;
  gap: 0.5rem;
}

.pagination button {
  padding: 0.5rem 0.75rem;
  border: 1px solid #d1d5db;
  background: white;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.pagination button:hover:not(:disabled) {
  background: #f9fafb;
}

.pagination button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.pagination button[aria-current="page"] {
  background: #2563eb;
  color: white;
  border-color: #2563eb;
}

/* Mobile responsive - Card view */
@media (max-width: 768px) {
  .table-header {
    flex-direction: column;
    gap: 1rem;
    align-items: stretch;
  }

  .table-actions {
    flex-direction: column;
  }

  .table-search {
    min-width: 100%;
  }

  table {
    border: 0;
  }

  thead {
    display: none;
  }

  tbody tr {
    display: block;
    margin-bottom: 1rem;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
  }

  td {
    display: flex;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    border-bottom: 1px solid #f3f4f6;
  }

  td:last-child {
    border-bottom: none;
  }

  td::before {
    content: attr(data-label);
    font-weight: 600;
    color: #374151;
  }

  .table-footer {
    flex-direction: column;
    gap: 1rem;
  }
}

Example 7: Card Grid Layout

HTML:

<div class="card-grid-container">
  <div class="grid-header">
    <h2>Featured Products</h2>
    <div class="view-toggle" role="tablist" aria-label="View type">
      <button
        role="tab"
        aria-selected="true"
        aria-controls="grid-view"
        aria-label="Grid view"
      >
        <svg><!-- Grid icon --></svg>
      </button>
      <button
        role="tab"
        aria-selected="false"
        aria-controls="list-view"
        aria-label="List view"
      >
        <svg><!-- List icon --></svg>
      </button>
    </div>
  </div>

  <div class="card-grid" id="grid-view">
    <article class="product-card">
      <div class="card-image">
        <img
          src="product1.jpg"
          alt="Wireless Headphones"
          loading="lazy"
        />
        <button class="wishlist-btn" aria-label="Add to wishlist">
          <svg><!-- Heart icon --></svg>
        </button>
      </div>
      <div class="card-content">
        <div class="card-category">Electronics</div>
        <h3 class="card-title">
          <a href="/products/wireless-headphones">Wireless Headphones</a>
        </h3>
        <p class="card-description">
          Premium noise-canceling headphones with 30-hour battery life.
        </p>
        <div class="card-rating" aria-label="Rating: 4.5 out of 5 stars">
          <span class="stars">★★★★½</span>
          <span class="rating-count">(128)</span>
        </div>
        <div class="card-footer">
          <div class="card-price">
            <span class="price-current">$199.99</span>
            <span class="price-original">$249.99</span>
          </div>
          <button class="btn-add-cart">Add to Cart</button>
        </div>
      </div>
    </article>

    <article class="product-card">
      <div class="card-badge">Sale</div>
      <div class="card-image">
        <img
          src="product2.jpg"
          alt="Smart Watch"
          loading="lazy"
        />
        <button class="wishlist-btn" aria-label="Add to wishlist">
          <svg><!-- Heart icon --></svg>
        </button>
      </div>
      <div class="card-content">
        <div class="card-category">Wearables</div>
        <h3 class="card-title">
          <a href="/products/smart-watch">Smart Watch Pro</a>
        </h3>
        <p class="card-description">
          Track your fitness with this advanced smartwatch.
        </p>
        <div class="card-rating" aria-label="Rating: 5 out of 5 stars">
          <span class="stars">★★★★★</span>
          <span class="rating-count">(342)</span>
        </div>
        <div class="card-footer">
          <div class="card-price">
            <span class="price-current">$299.99</span>
          </div>
          <button class="btn-add-cart">Add to Cart</button>
        </div>
      </div>
    </article>

    <!-- More cards... -->
  </div>
</div>

CSS:

.card-grid-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 2rem;
}

.grid-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
}

.grid-header h2 {
  margin: 0;
  font-size: 1.5rem;
  color: #111827;
}

.view-toggle {
  display: flex;
  gap: 0.5rem;
  background: #f3f4f6;
  padding: 0.25rem;
  border-radius: 8px;
}

.view-toggle button {
  padding: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  border-radius: 6px;
  transition: background-color 0.2s;
}

.view-toggle button[aria-selected="true"] {
  background: white;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

.product-card {
  position: relative;
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.3s;
}

.product-card:hover {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.15);
  transform: translateY(-4px);
}

.card-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  background: #dc2626;
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  z-index: 1;
}

.card-image {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #f3f4f6;
}

.card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.product-card:hover .card-image img {
  transform: scale(1.05);
}

.wishlist-btn {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: white;
  border: none;
  padding: 0.5rem;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  transition: all 0.2s;
}

.wishlist-btn:hover {
  background: #fee2e2;
  color: #dc2626;
  transform: scale(1.1);
}

.card-content {
  padding: 1.25rem;
}

.card-category {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #6b7280;
  margin-bottom: 0.5rem;
}

.card-title {
  margin: 0 0 0.5rem;
  font-size: 1.125rem;
  line-height: 1.4;
}

.card-title a {
  color: #111827;
  text-decoration: none;
  transition: color 0.2s;
}

.card-title a:hover {
  color: #2563eb;
}

.card-description {
  margin: 0 0 1rem;
  font-size: 0.875rem;
  color: #6b7280;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.card-rating {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.stars {
  color: #fbbf24;
}

.rating-count {
  font-size: 0.875rem;
  color: #6b7280;
}

.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: 1rem;
  border-top: 1px solid #f3f4f6;
}

.card-price {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.price-current {
  font-size: 1.25rem;
  font-weight: 700;
  color: #111827;
}

.price-original {
  font-size: 0.875rem;
  color: #9ca3af;
  text-decoration: line-through;
}

.btn-add-cart {
  padding: 0.5rem 1rem;
  background: #2563eb;
  color: white;
  border: none;
  border-radius: 6px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s;
}

.btn-add-cart:hover {
  background: #1d4ed8;
}

/* Responsive */
@media (max-width: 640px) {
  .card-grid {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 641px) and (max-width: 1024px) {
  .card-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

Feedback Patterns

Example 8: Toast Notification System

HTML:

<div class="toast-container" aria-live="polite" aria-atomic="true"></div>

<!-- Trigger buttons for demo -->
<div class="demo-controls">
  <button onclick="showToast('success', 'Changes saved successfully!')">
    Show Success
  </button>
  <button onclick="showToast('error', 'Failed to save changes')">
    Show Error
  </button>
  <button onclick="showToast('warning', 'Please review your changes')">
    Show Warning
  </button>
  <button onclick="showToast('info', 'New update available')">
    Show Info
  </button>
</div>

CSS:

.toast-container {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  max-width: 400px;
}

.toast {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  background: white;
  border-radius: 8px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
  animation: slideIn 0.3s ease-out;
}

.toast.removing {
  animation: slideOut 0.3s ease-in forwards;
}

@keyframes slideIn {
  from {
    transform: translateX(400px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes slideOut {
  from {
    transform: translateX(0);
    opacity: 1;
  }
  to {
    transform: translateX(400px);
    opacity: 0;
  }
}

.toast-icon {
  flex-shrink: 0;
  width: 1.5rem;
  height: 1.5rem;
}

.toast.success {
  border-left: 4px solid #10b981;
}

.toast.success .toast-icon {
  color: #10b981;
}

.toast.error {
  border-left: 4px solid #ef4444;
}

.toast.error .toast-icon {
  color: #ef4444;
}

.toast.warning {
  border-left: 4px solid #f59e0b;
}

.toast.warning .toast-icon {
  color: #f59e0b;
}

.toast.info {
  border-left: 4px solid #3b82f6;
}

.toast.info .toast-icon {
  color: #3b82f6;
}

.toast-content {
  flex: 1;
}

.toast-message {
  margin: 0;
  font-size: 0.875rem;
  color: #374151;
  line-height: 1.5;
}

.toast-close {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 0.25rem;
  cursor: pointer;
  color: #9ca3af;
  transition: color 0.2s;
}

.toast-close:hover {
  color: #374151;
}

.toast-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 3px;
  background: currentColor;
  opacity: 0.3;
  animation: progress 5s linear forwards;
}

@keyframes progress {
  from {
    width: 100%;
  }
  to {
    width: 0%;
  }
}

/* Mobile */
@media (max-width: 640px) {
  .toast-container {
    bottom: 1rem;
    right: 1rem;
    left: 1rem;
    max-width: none;
  }
}

JavaScript:

class ToastManager {
  constructor() {
    this.container = document.querySelector('.toast-container');
    this.toasts = [];
    this.maxToasts = 5;
  }

  show(type, message, duration = 5000) {
    // Remove oldest toast if max reached
    if (this.toasts.length >= this.maxToasts) {
      this.remove(this.toasts[0]);
    }

    const toast = this.create(type, message);
    this.container.appendChild(toast);
    this.toasts.push(toast);

    // Auto dismiss
    if (duration > 0) {
      setTimeout(() => this.remove(toast), duration);
    }

    return toast;
  }

  create(type, message) {
    const toast = document.createElement('div');
    toast.className = `toast ${type}`;
    toast.setAttribute('role', type === 'error' ? 'alert' : 'status');

    const icons = {
      success: '✓',
      error: '✕',
      warning: '⚠',
      info: 'ℹ'
    };

    toast.innerHTML = `
      <div class="toast-icon" aria-hidden="true">
        ${icons[type]}
      </div>
      <div class="toast-content">
        <p class="toast-message">${message}</p>
      </div>
      <button class="toast-close" aria-label="Close notification">
        ✕
      </button>
      <div class="toast-progress"></div>
    `;

    const closeBtn = toast.querySelector('.toast-close');
    closeBtn.addEventListener('click', () => this.remove(toast));

    return toast;
  }

  remove(toast) {
    toast.classList.add('removing');

    setTimeout(() => {
      toast.remove();
      const index = this.toasts.indexOf(toast);
      if (index > -1) {
        this.toasts.splice(index, 1);
      }
    }, 300);
  }
}

// Global instance
const toastManager = new ToastManager();

// Helper function
function showToast(type, message, duration) {
  return toastManager.show(type, message, duration);
}

This comprehensive examples file demonstrates the implementation of 8+ complex UI patterns with full HTML, CSS, and JavaScript code. Each example includes:

• Complete, production-ready code
• Accessibility features (ARIA attributes, keyboard support)
• Responsive design
• Smooth animations
• Best practices
• Detailed styling

The file continues with more examples covering modals, loading states, drag-and-drop, infinite scroll, and responsive patterns, providing developers with practical, copy-paste-ready implementations.

UI Design Patterns Skill

A comprehensive reference guide for implementing common user interface design patterns, components, and interactions with accessibility best practices.

Overview

This skill provides detailed guidance on UI design patterns used in modern web and mobile applications. It covers navigation patterns, form patterns, data display, feedback mechanisms, interaction patterns, and accessibility considerations.

What's Included

Navigation Patterns

• Tabs: Organize content into switchable panels
• Accordions: Collapsible content sections
• Breadcrumbs: Hierarchical navigation trails
• Pagination: Navigate through large content sets
• Menus: Dropdown, mega menus, hamburger navigation

Form Patterns

• Input Validation: Real-time and on-submit validation
• Multi-Step Forms: Break complex forms into steps
• Inline Editing: Edit content directly in place
• Search & Autocomplete: Type-ahead suggestions
• Form Layouts: Single/multi-column, label positioning

Data Display Patterns

• Tables: Sortable, filterable data grids
• Cards: Containerized related information
• Lists: Sequential item displays
• Grids: Row and column layouts
• Dashboards: Metrics and visualizations overview

Feedback Patterns

• Toasts/Snackbars: Temporary status messages
• Modals/Dialogs: Focused user attention overlays
• Loading States: Progress indicators and skeletons
• Empty States: First use and no-results guidance
• Notification Badges: Unread counts and status

Interaction Patterns

• Drag and Drop: Move and reorder items
• Infinite Scroll: Auto-load content on scroll
• Filtering: Refine displayed results
• Search: Find specific content
• Undo/Redo: Reverse and replay actions

Accessibility Patterns

• WCAG Compliance: Perceivable, Operable, Understandable, Robust
• Keyboard Navigation: Full keyboard support
• ARIA Attributes: Roles, states, and properties
• Screen Reader Support: Semantic HTML and announcements
• Color Contrast: Sufficient contrast ratios

Responsive Patterns

• Mobile-First Design: Start with mobile, enhance for desktop
• Adaptive Layouts: Fluid grids and flexible images
• Mobile Navigation: Touch-friendly navigation patterns
• Touch Interactions: Gestures and target sizes
• Responsive Tables: Adapt tables for small screens

Quick Start

Using a Pattern

1. Identify the Problem: What UI challenge are you solving? 2. Choose a Pattern: Select the most appropriate pattern from the skill 3. Review Guidelines: Read the pattern's best practices and accessibility requirements 4. Implement: Follow the code examples and structure 5. Test: Verify keyboard navigation, screen reader support, and responsive behavior

Example: Implementing a Tab Component

<!-- HTML Structure -->
<div role="tablist" aria-label="Content sections">
  <button role="tab" aria-selected="true" aria-controls="panel-1" id="tab-1">
    Overview
  </button>
  <button role="tab" aria-selected="false" aria-controls="panel-2" id="tab-2">
    Details
  </button>
</div>

<div role="tabpanel" id="panel-1" aria-labelledby="tab-1">
  Overview content...
</div>
<div role="tabpanel" id="panel-2" aria-labelledby="tab-2" hidden>
  Details content...
</div>

Best Practices:

• Use semantic ARIA roles
• Implement arrow key navigation
• Provide clear visual indicators
• Support keyboard shortcuts

When to Use This Skill

Use this skill when you need to:

• Design New Interfaces: Build user-friendly UI components
• Solve Common UX Problems: Apply proven solutions to interface challenges
• Ensure Accessibility: Make interfaces usable by everyone
• Review Existing UI: Evaluate current implementations against best practices
• Build Design Systems: Create consistent component libraries
• Implement Interactions: Add drag-drop, filtering, and dynamic behaviors
• Optimize for Mobile: Create responsive, touch-friendly interfaces
• Handle Forms: Design effective input validation and multi-step workflows
• Display Data: Present tables, lists, cards effectively
• Provide Feedback: Communicate system state with toasts, modals, loading states

Pattern Categories

1. Navigation (5 patterns)

Help users move through your application efficiently.

2. Forms (5 patterns)

Collect user input with clear validation and feedback.

3. Data Display (5 patterns)

Present information in scannable, organized formats.

4. Feedback (5 patterns)

Communicate system state and action results.

5. Interaction (5 patterns)

Enable rich user interactions and manipulations.

6. Accessibility (5+ considerations)

Make interfaces usable by all users regardless of ability.

7. Responsive (4+ patterns)

Adapt interfaces for different devices and screen sizes.

Core Principles

Consistency

• Use patterns consistently throughout your application
• Follow established conventions users already know
• Maintain visual and behavioral consistency

Accessibility First

• Design for keyboard navigation from the start
• Use semantic HTML elements
• Add ARIA attributes when necessary
• Test with screen readers
• Ensure sufficient color contrast

Progressive Disclosure

• Show only what users need at each step
• Reveal complexity gradually
• Use patterns like accordions and tabs to manage information density

Feedback and Affordance

• Provide immediate feedback for user actions
• Use visual cues to indicate interactivity
• Show system state clearly (loading, success, error)

Mobile-First Thinking

• Design for small screens first
• Ensure touch targets are large enough (44x44px minimum)
• Optimize for touch gestures
• Test on actual devices

Design Tokens

Standardize your design with reusable tokens:

Colors: Primary, semantic (success/error/warning), neutral scales Spacing: Consistent scale (4px, 8px, 16px, 24px, 32px, 48px) Typography: Font sizes, weights, line heights Borders: Radius values for different component types Shadows: Elevation levels for depth perception

Common Mistakes to Avoid

Navigation

• Too many tab levels or nested navigation
• Hidden navigation without clear access points
• Inconsistent navigation patterns across pages

Forms

• Using placeholder text as labels
• Poor error message placement or timing
• No visual feedback for validation states
• Requiring unnecessary information

Data Display

• Horizontal scrolling tables on mobile
• No empty states or error handling
• Inconsistent formatting across columns
• Poor visual hierarchy

Feedback

• Too many simultaneous notifications
• Auto-dismissing critical messages too quickly
• Modal dialogs for non-critical information
• No loading states for async operations

Accessibility

• Missing alt text for images
• Keyboard traps or no keyboard access
• Insufficient color contrast
• Missing form labels
• No focus indicators

Responsive

• Fixed pixel widths instead of fluid layouts
• Touch targets too small (less than 44x44px)
• Hover-only interactions on touch devices
• Not testing on actual devices

Testing Checklist

Functional Testing

• [ ] All interactions work as expected
• [ ] Form validation provides helpful feedback
• [ ] Navigation flows logically
• [ ] Data displays correctly in all states
• [ ] Error handling works properly

Accessibility Testing

• [ ] Keyboard-only navigation works
• [ ] Screen reader announcements are clear
• [ ] Focus indicators are visible
• [ ] Color contrast meets WCAG AA (4.5:1)
• [ ] ARIA attributes are correct and updated
• [ ] Form labels are associated properly

Responsive Testing

• [ ] Layouts adapt smoothly across breakpoints
• [ ] Touch targets are large enough on mobile
• [ ] Text is readable without zooming
• [ ] Navigation works on small screens
• [ ] Tables handle mobile gracefully
• [ ] Tested on actual devices

Performance Testing

• [ ] Animations run at 60fps
• [ ] Images are optimized and lazy-loaded
• [ ] Large lists use virtual scrolling
• [ ] No layout shifts during loading
• [ ] Bundle size is optimized

Browser Testing

• [ ] Chrome/Edge (Chromium)
• [ ] Firefox
• [ ] Safari (macOS and iOS)
• [ ] Fallbacks for unsupported features

Popular Design Systems

Learn from established design systems:

Material Design (Google)

• Comprehensive component library
• Strong motion and interaction guidelines
• Well-documented accessibility features

Human Interface Guidelines (Apple)

• iOS and macOS patterns
• Native mobile interactions
• Platform-specific conventions

Fluent Design (Microsoft)

• Windows application patterns
• Adaptive and responsive guidelines
• Cross-platform consistency

Polaris (Shopify)

• E-commerce focused patterns
• Excellent accessibility documentation
• Practical implementation examples

Carbon (IBM)

• Enterprise application patterns
• Data visualization components
• Comprehensive design tokens

Component Libraries

Pre-built implementations of common patterns:

Headless UI Libraries (Unstyled, accessible):

• Radix UI
• Headless UI
• React Aria

Styled Component Libraries:

• Shadcn UI
• Chakra UI
• MUI (Material-UI)
• Ant Design
• Mantine

CSS Frameworks:

• Tailwind CSS
• Bootstrap
• Bulma

Tools and Resources

Design Tools

• Figma: Collaborative interface design
• Sketch: macOS design tool
• Adobe XD: Design and prototype
• Framer: Interactive prototyping

Accessibility Tools

• axe DevTools: Browser extension for accessibility testing
• WAVE: Web accessibility evaluation tool
• Lighthouse: Automated auditing (built into Chrome)
• Color Contrast Analyzer: Check WCAG compliance
• NVDA/VoiceOver: Screen reader testing

Pattern Resources

• UI Patterns: Pattern library and examples
• Refactoring UI: Design tips and patterns
• Inclusive Components: Accessible component patterns
• Smashing Magazine: UI/UX articles and guides
• A List Apart: Web design best practices

Development Tools

• Storybook: Component development environment
• Chromatic: Visual regression testing
• Percy: Visual review platform
• BrowserStack: Cross-browser testing

Integration with Development

Component Structure

components/
├── Button/
│   ├── Button.tsx
│   ├── Button.test.tsx
│   ├── Button.stories.tsx
│   └── Button.module.css
├── Modal/
│   ├── Modal.tsx
│   ├── Modal.test.tsx
│   ├── Modal.stories.tsx
│   └── Modal.module.css
└── ...

Documentation Template

For each component, document:

1. Purpose: What problem does it solve? 2. When to Use: Appropriate use cases 3. Anatomy: Component parts and structure 4. Variants: Different configurations 5. Props/API: Configuration options 6. Accessibility: ARIA attributes, keyboard support 7. Examples: Code samples and demos 8. Best Practices: Guidelines and pitfalls 9. Related Components: Alternative or complementary patterns

Naming Conventions

Use clear, consistent names:

• Components: PascalCase (Button, Modal, DataTable)
• Props: camelCase (isOpen, onClose, ariaLabel)
• CSS Classes: kebab-case or BEM (button-primary, modal__header)
• Files: Match component name (Button.tsx, button.module.css)

Performance Optimization

Render Performance

• Memoize expensive computations
• Use virtualization for long lists
• Lazy load off-screen components
• Optimize re-renders with proper state management

Loading Performance

• Code splitting by route
• Lazy load below-the-fold images
• Use skeleton screens during load
• Implement progressive loading

Animation Performance

• Use CSS transforms and opacity (GPU-accelerated)
• Avoid animating layout properties
• Use requestAnimationFrame for JS animations
• Limit simultaneous animations

Version History

v1.0.0 - Initial release

• 25+ comprehensive UI patterns
• Accessibility guidelines for each pattern
• Responsive design considerations
• Code examples and best practices
• Testing checklists
• Tool and resource recommendations

Contributing Patterns

When documenting new patterns, include:

1. Pattern Name: Clear, descriptive name 2. Description: What it does and why 3. Use Cases: When to use (and not use) 4. Anatomy: Component structure 5. Variants: Different configurations 6. Best Practices: Guidelines and recommendations 7. Accessibility: WCAG compliance requirements 8. Code Example: HTML/CSS/JS implementation 9. Responsive: Mobile considerations 10. Related Patterns: Alternatives and complements

Getting Help

Understanding a Pattern

1. Read the "When to Use" section 2. Review the anatomy and structure 3. Check code examples 4. Review accessibility requirements 5. See EXAMPLES.md for detailed implementations

Choosing Between Patterns

Consider:

• User context and task
• Information hierarchy
• Screen size and device
• Accessibility requirements
• Performance implications
• Consistency with existing patterns

Troubleshooting

• Check accessibility attributes are correct
• Verify keyboard navigation works
• Test with screen readers
• Review browser console for errors
• Validate HTML structure
• Check responsive behavior

Next Steps

1. Review SKILL.md: Read the complete pattern documentation 2. Explore EXAMPLES.md: See detailed implementation examples 3. Build a Component: Pick a pattern and implement it 4. Test Thoroughly: Use the testing checklist 5. Document: Create usage guidelines for your team 6. Iterate: Refine based on user feedback

License

This skill is provided as part of Claude Code for educational and development purposes.

Acknowledgments

Built on established patterns from:

• WCAG Accessibility Guidelines
• WAI-ARIA Authoring Practices
• Material Design
• Apple Human Interface Guidelines
• Nielsen Norman Group research
• Inclusive Components by Heydon Pickering
• Community best practices and contributions

---

Remember: UI patterns are proven solutions, but always adapt them to your specific users, context, and brand. Test with real users and prioritize accessibility in every implementation.