Interactions · Status feedback

Focus State

Also called: Focus, Focus ring, Focus outline, Focus indicator

The style of an element that's selected and ready for input, like an input border getting darker when clicked, or an outline around a button when you press Tab.

Example

In detail

Focus means "keyboard input will go here right now." When you click an input, or press Tab to move between elements on the page, the focused element needs a clear style, usually an outline (a focus ring) or a border color change. You write it with CSS :focus or :focus-visible.

Lots of people find the browser's default focus outline ugly and just remove it with outline: none. That leaves keyboard users with no idea where they are, and it's a very common accessibility problem. The right fix is to replace it with a focus style that matches your design, not delete it. :focus-visible only shows during keyboard use and not on mouse clicks, so you get both usability and clean looks.

Focus and hover aren't the same thing. Hover is the mouse passing over; focus is being selected and ready for input. Both can happen at once.

Developer infoTerm ID, DOM cues, match priority

Term ID: interaction-focus-state
DOM selectors: No DOM cues. This concept isn't detected directly on a page.
Priority: 1 · when several match at the same level, the higher priority wins
Version: v1 · updated Sep 29, 2026