Focus Ring
A visible line or highlight around the control that now receives keyboard input.
Press Tab to follow focus
A real example
Pressing Tab in checkout puts a clear ring around each field and button without moving the page layout.
Main parts
- 01Visible label
- 02Interaction target
- 03Current state
- 04Keyboard behavior
Use it when
Show it on every control that can receive keyboard focus. Test it on every background and in every state.
Do not use it when
Never remove the browser outline without an equally clear replacement. A hover style does not show keyboard focus.
Name used in code
:focus-visible outline Before you ship
Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience.
Outcome: Use or define Focus Ring to make the visual experience clear and easy to use. User context: Pressing Tab in checkout puts a clear ring around each field and button without moving the page layout. Design concept to apply: Focus Ring. Why it fits: Show it on every control that can receive keyboard focus. Test it on every background and in every state. Do not use it when: Never remove the browser outline without an equally clear replacement. A hover style does not show keyboard focus. Design requirements: Set the content order, shared design values, and reusable components. Define how the layout changes by screen size and state. Keep useful design choices separate from decoration. Inclusion and resilience: Check contrast, zoom, languages, themes, and reduced motion when needed. Do not use color or effects as the only way to show meaning. Acceptance criteria: The design stays clear on phones and desktops, at zoom, in every theme, and in all supported languages. Interactive states stay clear and consistent. Evidence and limits (evidence boundary): It is official for that source. Other platforms or teams may use the term in another way. Unknowns to confirm: Brand limits, amount of content, supported themes and languages, target devices, and design-system rules.
Check this request
Review the current use of Focus Ring. Definition: A visible line or highlight around the control that now receives keyboard input. Release checks: Check content order, shared design values, component consistency, contrast, zoom, and layout changes by screen size. Verify every theme, language, and state. If there is motion, offer an equal reduced-motion experience. Before changing code, report the evidence you found, gaps, severity, and the smallest safe fix.