Focus state

Some users use keyboards or other devices to navigate through a page by jumping from one interactive element to the next. Focus states help users understand which element is currently selected and ready for interaction.

Focus states are orange and neutral-800, aiming to conform to the WCAG 2.1 Level AA non-text contrast on any background colour.

We have chosen this orange colour as it is a direct opposite of our primary colour. This allows all colourblind users to see a visual difference. Focus state styling also removes any border radius to create a bigger visual difference to surrounding elements.

#Inline style

The inline focus state helps links stand out from the rest of the content on a page. When a link receives focus, it will underline and change background colour. Other components and elements that look like links use the inline style.

#Block style

The block style completely highlights a section or whole component with the focus state. For example, when a button receives focus, a border is added to the bottom of the container and the background colour will change.

#Outline focus state style

The outline styles are for when form inputs are focused. When a form field receives focus, it adds a border. If the element already has a border, the border gets thicker.

#Modified focus states for components

The alert component has a modified focus state colour. This is consistent across all alert variants. It meets colour contrast requirements on all semantic colours, including danger and warning.

The modified styling uses a white background in place of the orange, still with the dark content and border.

#CSS Variables

The focus state has three CSS Variables.

#Theming

For advice on focus state theming, see theming guidance for designers or theming guidance for developers.