UI Design
Focus State
A focus state is the visible indicator showing which element currently has keyboard focus, often drawn as an outline or ring. It tells people using a keyboard where they are on the page.
Why it matters
Many people navigate without a mouse, using the Tab key to move between elements. Without a visible focus state, they cannot tell what they are about to activate, which makes the interface unusable for them.
In depth
Browsers add a default focus ring for free, and a frequent accessibility failure is removing it with CSS because it looks unwanted. The fix is to restyle it to match your design, never to delete it. Focus is related to but distinct from hover: hover responds to a pointer, while focus responds to keyboard navigation and assistive technology.
Real-world example
Pressing Tab through a form moves a glowing outline from field to field, so you always know which input will receive your typing.
Hover, click, or tab to the button. Each state needs its own visible signal.
Related terms