How do I add a focus state in Webflow?

Choose Focused (keyboard) in the States menu

Focus is the state people reach without activating a control. Tabbing to a button or a link focuses it. A click both focuses and activates it. Webflow lists two focus choices in the States menu: Focused, and Focused (keyboard).

Select the element. In the Style panel, open the dropdown in the Selector and choose Focused (keyboard). A green label appears on the Selector. You are editing that state, the same way a hover style is edited on Hover. The canvas keeps showing the state until you leave it.

Focused covers focus from a mouse, a tap, or a keyboard, and styles you put there are inherited by Focused (keyboard). Focused (keyboard) is the keyboard path: someone pressing Tab. Webflow says text inputs always use Focused (keyboard) while focused, including when the person clicked the field. On most other elements only one of the two states applies at a time. On form inputs such as text inputs and selects, both apply on the published site, and Focused (keyboard) overrides Focused.

When you are finished, choose None, press Esc (this also deselects the element), or select a different element.

Add an outline that does not move the layout

Webflow suggests an outline for this state because an outline draws around the element without taking extra space, without changing its size, and without shifting the layout when it appears. A border or a heavy shadow can move neighbors. An outline does not.

With Focused (keyboard) still selected, open Effects and then Outline.

• Set Style to solid, dashed, or dotted. Style None removes the browser's default ring.
• Set Width above 0. Webflow recommends at least 2 pixels. The outline walkthrough starts the width at 3 pixels.
• Set Offset if you want space between the ring and the edge. The walkthrough starts offset at 0.
• Set a Color that stands apart from the element and from the background behind it. The walkthrough starts from the element's current font color.

Webflow says focused outlines need at least a 3:1 contrast ratio against the element and against what is behind it. A blue ring on a blue band fails that check even when the same blue is fine on white.

Do not put the outline on None. That overrides the browser default, so tabbing through the page leaves no visible position. A width of 0 does the same thing.

Example: a class named Button gets a 2 pixel solid outline on Focused (keyboard), with a 2 pixel offset, in a color that stays visible on the page background. The resting button stays as it was on None.

Choose whether a click should show the ring

Use Focused (keyboard) when the ring should appear for keyboard focus and you would rather not show it on an ordinary click or tap. Use Focused when the ring should show for a click, a tap, and a tab. Styles on Focused are inherited by Focused (keyboard), so a ring on Focused still helps keyboard users unless you override it.

Hover is a separate state, and it does not run on most touch devices. Pressed inherits Hover and covers a click or a tap. Leave the focus outline in place when you style those. The hover guide covers the pointer. This page covers the keyboard position.

A combo class can change the ring on one group of buttons. Webflow's outline article uses that for buttons that sit on a blue section: the shared class can keep a blue ring, and the combo class can switch the outline color to white while Focused (keyboard) is selected. The combo class guide shows how to add that second class.

Preview with Tab, including Safari

Press Esc to leave the state. Click the eye icon at the top left to preview. Click the canvas, then press Tab and Shift+Tab to move through the interactive elements. The ring should land on the button, leave it when you tab onward, and stay off while the button is only sitting on the page.

Safari needs its own setting before Tab highlights each item. Turn on Press Tab to highlight each item on a webpage under Settings, then Advanced. Until that is on, a Safari test can look like the focus style failed.

Publish and repeat the Tab check on the live page. Designer preview is the first look. The published page is the one visitors use.

Reset a ring that is on the wrong state

To clear a custom outline, select the element, choose the state that holds it, open Effects, click Outline, and choose Reset. Option + click on Mac, or Alt + click on Windows, resets the outline properties together. Choosing Style None is a weak cleanup: Webflow says None does not clear width, offset, or color, and it hides the ring.

After a reset, preview and tab again. The browser's own outline should return if the custom one is fully cleared. If the ring is still stuck on the resting button, None still has an outline. Reset that state too.

If the same pages keep shipping without a visible focus position, I can apply the outline from a written note that names the class. The membership is one plan for every existing Webflow site: $999 per month, including 10 hours of Webflow work. Communication is asynchronous and written only. There are no calls or meetings.