Focus ring
Also called focus outline, focus indicator, or focus-visible
An outline that marks which element has keyboard focus, so people moving through a page with the Tab key can see where they are.
import { Field } from '@base-ui/react/field';
// :focus-visible shows the ring after a Tab press and in text fields, but not
// when a mouse click focuses the button. blue-500 keeps 3:1 contrast on both
// light and dark backgrounds.
const RING =
'focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-blue-500';
export function NewsletterForm() {
return (
<form className='flex items-end gap-2'>
<Field.Root className='flex flex-col gap-1.5'>
<Field.Label className='text-sm font-medium'>Email</Field.Label>
<Field.Control
type='email'
required
placeholder='you@example.com'
className={`h-10 w-64 rounded-lg border bg-background px-3 text-sm focus-visible:border-blue-500 ${RING}`}
/>
</Field.Root>
<button
type='submit'
className={`h-10 rounded-lg bg-primary px-4 text-sm font-medium text-primary-foreground ${RING}`}
>
Subscribe
</button>
</form>
);
}Replace the browser’s default focus outline with a consistent focus ring on every button, link, input, and menu item: a 2px solid outline in our accent color with a 2px offset, shown with :focus-visible so mouse clicks don’t trigger it. Never use outline: none without this replacement, and make sure the ring has at least 3:1 contrast in light and dark mode.
Paste into Layerwise or any AI coding tool.
What is Focus ring?
When someone moves through a page with the Tab key, one element at a time has focus: the field they will type into, or the button that Enter will press. The focus ring is the visible marker around it, usually a 2px outline in the accent color with a small gap between the outline and the element.
Browsers draw a default ring, and many designs remove it with outline: none because it looks out of place. Without a replacement, keyboard users lose track of where they are, as the right-hand form in the demo shows. Restyle the ring to match your design and keep it.
Style :focus-visible instead of :focus. Browsers apply :focus-visible when focus should be shown, such as after a Tab press or inside a text field, and skip it when a mouse click focuses a button. Keyboard users get a clear ring, and mouse users don’t see one flash on every click.
Aim for at least 3:1 contrast between the ring and the colors around it, in both light and dark mode. Outlines take up no space, so an outline-based ring never shifts the layout, but a parent with overflow: hidden can clip it; outline-offset or a slightly inset ring helps.
Related terms
All termsInteraction states
The set of looks a control takes as people use it, such as default, hover, pressed, focused, and disabled, each showing what will happen.
Keyboard shortcut
A key combination that runs an action directly, like ⌘S to save or ⌘K to open search, so frequent users can skip the mouse.
Color contrast
How much text stands out from its background, measured as a ratio from 1:1 to 21:1 and checked against the WCAG levels AA and AAA.
Modal
A window that opens over the page, dims everything behind it, and blocks the rest of the interface until you finish or dismiss it.
Build it with Layerwise
Describe your app, watch it run in a live preview, and publish it with a database, storage, and sign-in built in.