Use the following utilities to apply focus styles to custom UI components.

Examples

Focus rings

Focus

Use the .ds-u-focus utility to conditionally apply focus styles to your component when that component has focus. Focus will be applied regardless of keyboard or mouse interaction.

Click or tab into the following example to see this utility in action.

Focus-visible

Use the .ds-u-focus-visible utility to conditionally apply focus styles to your component when that component has keyboard focus.

Tab into the following example to see this utility in action.

Focus-within

Use the .ds-u-focus-within utility to conditionally apply focus styles to your component when a child element of that component has focus. Focus will be applied regardless of keyboard or mouse interaction.

Click or tab into the following example to see this utility in action.