Focus #

A consistent focus ring ensures predictable and accessible keyboard navigation.
Using --afp-color-focus and --afp-color-focus-input, all components share a unified and recognizable focus state.

Custom Properties #

These properties use rem units in order to scale proportionately with the root font size.

Custom Property	Default	Description
`--afp-focus-width`	`0.125rem` (2px)	Width of the focus outline.
`--afp-focus-space`	`0.0625rem` (1px)	Space between the component border and the focus outline.
`--afp-focus-input-width`	`--afp-focus-width`	Width of the focus outline used by input-like components.
`--afp-focus-input-border-style`	`--afp-border-style`	Border style used for the input focus outline.
`--afp-focus-input-space`	`--afp-focus-space`	Space between the input border and the focus outline.

Example #

Focus me

<div class="afp-stack">
  <afp-button>Focus me</afp-button>
  <afp-input placeholder="Focus me" hidelabel></afp-input>
</div>

<div class="afp-stack">
  <afp-button>Focus me</afp-button>
  <afp-input [placeholder]="'Focus me'" hidelabel></afp-input>
</div>

<div class="afp-stack">
  <AfpButton>Focus me</AfpButton>
  <AfpInput placeholder="Focus me" hidelabel></AfpInput>
</div>

<div class="afp-stack">
  <AfpButton>Focus me</AfpButton>
  <AfpInput :placeholder="'Focus me'" hidelabel></AfpInput>
</div>