Skip to main content

Focus State

Focus State communicates when a user has engaged or highlighted an interactive component by using a keyboard or voice command. Focus States enable a better experience for users with visual or motor impairments and those who prefer keyboard and voice control to navigate through an application.

Appearance and Behavior

The Focus State consists of a 1 pixel outline which sits 2 pixels away from the focused element. The Focus State uses a bright pink color style, as it stands out from the rest of the Astro color palette sufficiently to attract a user’s attention.

Generally, the Focus State encompasses the part of the element that is interactive. In certain cases, such as the slider component, the thumb is interactive. With simpler elements that have labels (like radio and checkboxes), giving focus to the whole component makes the intention of the form item more clear (for example, this radio is connected to this text label).

Focus should only appear when using the keyboard or voice control. Use the css pseudo-element :focus-visible rather than :focus to achieve this. Here is an example of focus CSS using Astro design tokens.

&:focus-visible {
    outline: var(--border-width-focus-default) solid var(--color-border-focus-default);
    outline-offset: var(--spacing-focus-default);
    border-radius: var(--radius-base) //optional
}

Rules of Thumb

Examples

Do: Include the entire component within the focus state for radio buttons and checkboxes.
Do: Include the entire component within the focus state for radio buttons and checkboxes.
Don’t: Focus only the radio button control when its label is visible.
Don’t: Focus only the radio button control when its label is visible.
Do: Focus only interactive elements.
Do: Focus only interactive elements.
Don’t: Focus non-interactive patterns and components.
Don’t: Focus non-interactive patterns and components.
Do: Focus the thumb control of the slider.
Do: Focus the thumb control of the slider.
Don’t: Focus the entire slider component.
Don’t: Focus the entire slider component.