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.

Variants

The following focus states are available:

• Focused
• 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.

  Use:

• If an element is interactive.
• If a device has a remote control attached that allows users to move the focus (similar to remote controls for TVs or TV devices).

  Don’t Use:

• 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.

Related Links