Skip to main content

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

  • Only one Focus State can exist on the screen at any time.
  • Utilize established reading patterns to create the order of elements that will receive focus on a page.

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.

Asset Status

Asset Version Status
Documentation N/A Available
UI Kit - Dark v7 Available
UI Kit - Light v7 Available
UI Kit - Wireframe v7 Available
Web Component v7 Available
Component Tokens N/A Planned
Status Key
Available In Progress Planned Not Available Deprecated
Feedback

Help us improve Astro

Please rate your present experience with Astro:

Cancel