Focus States

Foundations / Interaction / States / Focus States

Intro

Focus states determine which component receives the user’s input when the input doesn’t supply positioning information. The focus state is most important for keyboard users. The following focus states are available: focused and unfocused.

Focused

The component shows the focus state when it receives user input. If a keyboard is available, all interactive elements must provide a focus state.

Only one element can be focused at a time. If another element is focused, the previously focused element becomes unfocused.

Button, input – focused

2
do
false

Use the focused state:

  • If an element is interactive.
  • If a device has a remote control attached that allows users to move the focus (like remote controls for TVs).
dont
false

Don’t use the focused state:

  • If the component is disabled or hidden.
    Exceptions are allowed for a few special cases, such as a disabled menu item.

Unfocused

The unfocused state is applied to all elements that aren’t focused.

Button, input – unfocused

Guidelines

Specifications

Guidelines