Focus
Focus tokens create a consistent, recognizable outline that lets keyboard users track where they are on the page. Together with --wa-color-focus, these tokens assemble the focus ring applied to all interactive Web Awesome components.
| Custom Property | Description |
|---|---|
--wa-focus-ring-style |
Line style for the focus outline |
--wa-focus-ring-width |
Thickness of the focus outline |
--wa-focus-ring |
Shorthand combining style, width, and color into a complete focus outline value |
--wa-focus-ring-offset |
Gap between the element's edge and the focus outline |
See your theme's focus ring by navigating this form with your keyboard:
<form class="wa-stack"> <wa-input label="Text Input"> <span slot="hint">Press <kbd>Tab</kbd> to move focus to other interactive elements.</span> </wa-input> <wa-checkbox>Checkbox</wa-checkbox> <wa-button variant="brand">Button</wa-button> </form>