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.
Design tokens (recommended)
Use the --hds-focus-ring-box-shadow-action 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-visible {
border-radius: inherit;
box-shadow: var(--hds-focus-ring-box-shadow-action);
}
}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
Colors
Focus ring in Carbon
In Carbon, focus rings are slightly different than in HDS:
- the visual outline is applied inside the element in most cases
- there is no differentiation for critical interactive elements
Below you can see how the hds-focus-ring-box-shadow CSS helpers are rendered in their "carbonized" versions:
Because Carbon's focus ring is inset, the --hds-focus-ring-box-shadow-*** tokens and the .hds-focus-ring-box-shadow-*** CSS helpers must be applied directly to an element when the element has a background color, and not to a parent, otherwise the box shadow that renders the focus ring will be hidden behind the element's background.