---
name: patterns-ui-ux
description: "Choose and implement UI and UX patterns using the Patterns decision guides. Use when comparing interface controls, planning user flows, or reviewing interaction and accessibility behavior."
---

# Patterns UI/UX

Use this reference to choose a pattern for a specific user task and implement its interaction and accessibility behavior.

When using a local copy, read the [current skill index](https://patterns.alexanderclaes.com/SKILL.md) at the start of the task to discover added or renamed guides.

## Workflow

1. Identify the user task, the information needed, and the consequence of an error. Respect the project’s existing design system and technology choices.
2. Select the relevant guides from the index below and read their current Markdown versions before making a recommendation. Read related guides only when the decision needs them.
3. Check the use and avoid conditions and relevant primary sources. Report material differences, name the preferred source and explain the choice using the source policy below. If no material difference is found, say so and name the sources checked. Treat design recommendations as contextual and preserve applicable technical requirements.
4. Apply the implementation guidance and verification question to the actual interface. The example links demonstrate individual patterns; they do not establish accessibility conformance for the finished product.
5. Read any source-difference notice in the guide. A preferred starting point in an unresolved notice is provisional. Context notes describe different approaches without implying that the guide is incorrect. Overview and search icons flag unresolved reviews only; context notes remain on guide pages.

## Source preferences and disagreements

[Public source policy](https://patterns.alexanderclaes.com/about/#sources)

We check the sources for each topic and point out material differences. Technical requirements come first within their scope. For design advice that leaves a choice, we use the preference order below.

### Requirements and implementation

- **Web and accessibility standards:** Use applicable WCAG, HTML, WAI-ARIA and protocol requirements for conformance, native behavior and interoperability. Distinguish normative requirements from explanatory guidance. [WCAG 2.2](https://www.w3.org/TR/WCAG22/) · [HTML Standard](https://html.spec.whatwg.org/) · [WAI-ARIA](https://www.w3.org/TR/wai-aria-1.2/) · [IETF RFCs](https://www.rfc-editor.org/)
- **Accessibility and browser implementation guidance:** Use W3C WAI tutorials and APG for accessible interaction patterns, and MDN for browser APIs and native HTML. APG examples and tutorials are implementation guidance; test the finished interface with its users and supported technology. [WAI tutorials](https://www.w3.org/WAI/tutorials/) · [ARIA Authoring Practices Guide](https://www.w3.org/WAI/ARIA/apg/) · [MDN](https://developer.mozilla.org/en-US/docs/Web)
- **Security guidance:** Use OWASP for server validation, authorization and other security controls. Interface convenience must preserve those controls. [OWASP Cheat Sheet Series](https://cheatsheetseries.owasp.org/)

### Preferred design sources, in order

1. [GOV.UK Design System](https://design-system.service.gov.uk/) — Default for forms, transactions, navigation and service content. Check whether its government-service assumptions fit the task.
2. [IBM Carbon](https://www.carbondesignsystem.com/) — Next reference, especially for dense application interfaces, workspaces and data-heavy tasks.
3. [U.S. Web Design System](https://designsystem.digital.gov/) — Additional component and service guidance. Preserve component-specific accessibility warnings.
4. [Singapore Government Design System](https://www.designsystem.tech.gov.sg/) — Additional component guidance, with its particular interaction and modality assumptions.
5. [Scottish Government Design System](https://designsystem.gov.scot/) — Additional public-service guidance, including search and mobile filtering.
6. [GitHub Primer](https://primer.style/) — Additional application guidance, including focus management and dynamic content.

### When sources differ

- Compare the current sources relevant to the decision. Identify whether they disagree about a requirement, a design default, or the behavior of a particular component.
- Use the first applicable design source in the order above as the default. More relevant task evidence or a component-specific limitation can justify another choice; explain and record the reason.
- State the material alternatives, the source we prefer for that decision, and why. Preserve scope, qualifications and known accessibility issues. Label our own synthesis as a recommendation.
- When a source is unavailable or the evidence is inconclusive, disclose the limitation. Do not describe the decision as source-verified or invent agreement.

- [How should a form choose between radios, a select and autocomplete?](https://patterns.alexanderclaes.com/patterns/select-or-radios/): prefer [GOV.UK · Select](https://design-system.service.gov.uk/components/select/). Follow GOV.UK: make manageable choices visible and try narrowing a long list before using a select. Its last-resort advice applies to public-facing services and is not a WCAG prohibition. Do not adopt the USWDS more-than-15-options heuristic as a universal cutoff; preserve its warning about assistive-technology issues with its own combo box and suggestion to consider a select. Test any necessary select or autocomplete with users and supported technology. Alternatives: [USWDS · Combo box](https://designsystem.digital.gov/components/combo-box/).
- [Should filters update results instantly or after Apply?](https://patterns.alexanderclaes.com/patterns/search-or-filters/): prefer [Carbon · Filtering](https://www.carbondesignsystem.com/building-blocks/core/patterns/filtering). Follow Carbon’s task-based approach: instant updates for one category or one expected selection, batch updates for several selections across categories, choices that take time to consider or slow results. Scottish Government requires Apply in its mobile pattern because users may miss automatic changes. Preserve that caveat as a contextual check: use Apply when changes are easy to miss and test whether users understand the feedback, rather than requiring Apply on every mobile layout. Alternatives: [Scottish Government · Search filters](https://designsystem.gov.scot/patterns/search-results/search-filters).
- [When should content be hidden in an accordion?](https://patterns.alexanderclaes.com/patterns/accordions/): prefer [GOV.UK · Choosing accordions, details and visible content](https://design-system.service.gov.uk/components/accordion/). Follow GOV.UK for the design decision: keep essential content visible, use accordions only when user research supports them, use separate pages for a series of questions and do not nest accordions. W3C APG demonstrates a form accordion and discusses nesting as implementation cases, not evidence that these designs suit a task. Use APG for accessible keyboard interaction and semantics after the design choice is justified. Alternatives: [W3C · Accordion pattern](https://www.w3.org/WAI/ARIA/apg/patterns/accordion/).
- [Which requirements should govern error messages and their presentation?](https://patterns.alexanderclaes.com/patterns/error-recovery/): prefer [WCAG 2.2 · Error identification (3.3.1)](https://www.w3.org/TR/WCAG22/#error-identification). Follow WCAG 3.3.1 for textual input-error identification, 3.3.3 for known correction suggestions with its security and purpose exceptions, and 4.1.3 for dynamic status messages. GOV.UK’s always-show-and-focus-an-error-summary and explanatory-page conventions are more prescriptive presentation choices. This guide chooses inline messages, summaries or pages for the task while preserving the applicable WCAG requirements. Alternatives: [GOV.UK · Error summaries for validation](https://design-system.service.gov.uk/components/error-summary/), [GOV.UK · Field errors and service failures](https://design-system.service.gov.uk/components/error-message/).
- [How should a multi-step form group fields and communicate progress?](https://patterns.alexanderclaes.com/patterns/multi-step-forms/): prefer [W3C · Multi-page forms](https://www.w3.org/WAI/tutorials/forms/multi-page/). Prefer W3C for this guide: keep related fields in logical stages and communicate progress, explaining the number of steps where possible. Titles or headings can provide progress information without a graphical bar. This explicitly chosen guide-specific preference takes precedence over the general GOV.UK design default; GOV.UK’s one-question-per-page and test-without-an-indicator defaults remain documented as a different approach. Alternatives: [GOV.UK · Question pages and progress indicators](https://design-system.service.gov.uk/patterns/question-pages/).
- [When should a form give validation feedback?](https://patterns.alexanderclaes.com/patterns/validation-timing/): prefer [W3C · Form notifications and validation timing](https://www.w3.org/WAI/tutorials/forms/notifications/). Follow W3C guidance on choosing feedback during typing, on focus change or after submission according to the task. The validating-input tutorial is complementary guidance on browser checks and server enforcement. Our former submission-first restriction was an editorial preference, not a W3C requirement; removing it resolves the review without implying a disagreement between these sources. Alternatives: [W3C · Validating input](https://www.w3.org/WAI/tutorials/forms/validation/).
- [Should a modal support Escape dismissal?](https://patterns.alexanderclaes.com/patterns/modal-or-page/): prefer [W3C APG · Modal dialog pattern](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/). Follow W3C APG: Escape closes the modal, with a clear Cancel or Close action and appropriate focus return. We do not adopt the USWDS forced-action variant in this guide. Preserve costly drafts when dismissing as an additional usability safeguard; APG does not prescribe a draft-storage mechanism. Alternatives: [USWDS · Modal guidance](https://designsystem.digital.gov/components/modal/).

## Guide index

The following 19 guides are generated from the same validated content as the website. Fetch the relevant linked guide when using this skill rather than relying on an older copied recommendation.

### Overlays

- [Modal, drawer, or separate page?](https://patterns.alexanderclaes.com/patterns/modal-or-page.md)
- [When should I use a drawer?](https://patterns.alexanderclaes.com/patterns/drawers.md)

### Forms

- [When should a form show errors?](https://patterns.alexanderclaes.com/patterns/validation-timing.md)
- [Select menu or radio buttons?](https://patterns.alexanderclaes.com/patterns/select-or-radios.md)
- [One long form or multiple steps?](https://patterns.alexanderclaes.com/patterns/multi-step-forms.md)
- [Toggle or checkbox?](https://patterns.alexanderclaes.com/patterns/toggles-or-checkboxes.md)
- [Does this flow need a review step?](https://patterns.alexanderclaes.com/patterns/review-before-submit.md)

### Navigation

- [Tabs or page navigation?](https://patterns.alexanderclaes.com/patterns/tabs-or-navigation.md)
- [When are breadcrumbs useful?](https://patterns.alexanderclaes.com/patterns/breadcrumbs.md)
- [Search, filters, or both?](https://patterns.alexanderclaes.com/patterns/search-or-filters.md)

### Feedback

- [Toast, banner, or inline message?](https://patterns.alexanderclaes.com/patterns/toast-or-banner.md)
- [Spinner, skeleton, or progress bar?](https://patterns.alexanderclaes.com/patterns/loading-states.md)
- [What should an error message say?](https://patterns.alexanderclaes.com/patterns/error-recovery.md)

### Data & content

- [What belongs in an empty state?](https://patterns.alexanderclaes.com/patterns/empty-states.md)
- [Pagination or infinite scroll?](https://patterns.alexanderclaes.com/patterns/pagination.md)
- [Table or cards?](https://patterns.alexanderclaes.com/patterns/tables-or-cards.md)
- [Accordion or visible content?](https://patterns.alexanderclaes.com/patterns/accordions.md)

### Actions

- [Confirmation or undo?](https://patterns.alexanderclaes.com/patterns/destructive-actions.md)
- [Button or link?](https://patterns.alexanderclaes.com/patterns/button-or-link.md)

## Website

[Browse the guides](https://patterns.alexanderclaes.com/) · [Skill usage](https://patterns.alexanderclaes.com/skill/)