The page navigation is complete. You may now navigate the page content as you wish.
Skip to main content

Focus ring

Focus rings display when interactive components are focused by the user. They are vital for communicating interactivity.

How to use this style

We recommend applying the “focus-ring” style to an element using the design token provided as a custom CSS property.

Note that border-radius is not included with this token and needs to be set according to the specs of the UI element. Consider using inherit.

Use the --token-focus-ring-action-box-shadow design token directly in your CSS definitions. Note that it can only be used with the box-shadow property.

.your-selector {
  [...your CSS declarations]
  &:focus,
  &:focus-visible {
    box-shadow: var(--token-focus-ring-action-box-shadow);
    border-radius: inherit;
  }
}

CSS helper classes

The CSS helper class .hds-focus-ring-box-shadow is a wrapper of the design token. It’s likely you’ll need to use this helper class in composition with other classes (instead of directly in a template) because it’s connected to the element’s “focused” pseudo-state.

To use this class, ensure you’ve imported the relevant CSS file:

// for product applications
@import "~@hashicorp/design-system-tokens/dist/products/css/helpers/focus-ring.css";

// for hashicorp developer platform
@import "~@hashicorp/design-system-tokens/dist/devdot/css/helpers/focus-ring.css";

Examples

Border radius

no radius
with border radius

Colors

action
critical