Focus

You might say

I can't tell where I am when I use Tab. Can you add a clear focus outline?

Show which element will receive keyboard inputFocus identifies the interactive element currently controlled by the keyboard or another input method. A visible focus indicator is essential for navigation and form entry. It may differ from hover, but it should be at least as easy to see.

Walk through with Tab — only the visible ring tells you where you are

Quick checkChoose the best answer

A keyboard user cannot tell which control Tab will operate. What should be added first?

Keep a clear visible focus style on interactive controlsRemove the browser focus outline for a cleaner UIImprove hover only because keyboard users also see a mouse

You can say this to an AI Agent

Add consistent high-contrast focus-visible styles for links, buttons, and inputs without removing default focus. Enter the page from the address bar using only keyboard and Tab through it; every position must be visible and Enter must trigger the expected control.

When to use it

Keyboard navigation
🔍 Search topics you are interested in…
Form field editing
Menu and dialog control
Any interactive element that can receive input

When NOT to use it

Remove the browser outline without a replacement
Show focus only after a mouse click if keyboard users need it
Use an indicator with too little contrast
Move focus somewhere unexpected after an action

Anatomy

Inputting...Stroke 2px+Tab → Next

The control currently holding focus

Tells everyone “focus is right here”

The route the Tab key travels; follows DOM order by default

Variants

Outline

Button

When the browser's default focus style is already clear

Ring

Input

Brand-color outer glow, more modern

Background

Menu item

For focused list and menu items

Typical use cases

Form field

Complete Your Profile

Tab ⇥ Press to move focus to the next field

Button

Nice color palette

Focused input: brand-color ring + glow — the cursor is easy to spot

Navigation

Push Notifications

🔊 VoiceOver: “Push Notifications, switch, on”

Dialog

🔍 theme ⌘K

Switch to dark mode

Theme & appearance settings