1. Design System
2. Patterns
3. Focus Indicator

Focus Indicator

Create clear focus styles that guide users through your interface.

Help users identify interactive elements.

When to use

Apply focus styles to every interactive element such as buttons, links, and form controls so users can navigate confidently.

How to use

Create two contrasting borders by applying box-shadow and removing the browser default outline. This approach ensures your focus style meets contrast requirements independently.

Example

*:focus {
  box-shadow: var(--pl-focus-box-shadow);
}

/* Or modify for your situation */
*:focus {
  box-shadow: 0 0 0 2px var(--pl-color-bg-accent), 0 0 0 4px var(--pl-color-fg-default);
  outline: none;
}

Relevant guidelines

• 1.4.11 Non-text Contrast - Choose high contrast colors for interactive elements.
• 2.4.7 Focus Visible - Display clear focus indicators for keyboard users.
• 2.4.13 Focus Appearance - Design focus indicators that stand out clearly.