Skip to content

AccessibilityFocus

Focus

One focus ring, applied through :focus-visible, never overridden. The rule is short and the rule is non-negotiable.

2 px ring3 px offsetAll components

The rule

Every focusable element in the system uses the same focus ring. The ring is set in app/globals.css under@layer base:

css
:focus-visible {
  outline: none;
  box-shadow:
    0 0 0 2px var(--ring),
    0 0 0 4px var(--background);
}

The ring is 2 px of --ring (a value that resolves to--foreground) with a 2 px offset in--background. It is visible on every focusable element when it receives focus via keyboard.

Demo

Tab into any of the controls below to see the ring.

Demo
A link with focusSecondary

Rules

  1. One ring, everywhere. The ring is set once, in :focus-visible, in the base layer. Components do not override it.
  2. Never outline: none without a replacement. Stripping the outline is a common bug; we catch it in review.
  3. Use :focus-visible, not :focus. The ring should appear for keyboard users, not for mouse users clicking.
  4. Inputs get a thicker ring. Inputs use a 3 px inner shadow instead of an outline, so the field's geometry doesn't change.

What not to do