State names

It can be difficult to ensure that naming conventions are used consistently, and even giving things appropriate and easily understood names can be a challenge. When designing interfaces we want to use the same words for each state (e.g. active, selected). HTML and CSS conventions provide a set, solid standard and make for a good shared language.

Below you can find a guide to the names of different UI states.

States

Name

Description

CSS selector

Notes

FocusAn element has keyboard focus.:focusLinks, buttons, and inputs can receive a focus state. Navigation items, accordions, and tabs can too, usually because they're links or buttons. Note that other elements can be made to receive focus using tabindex, but since they're not interactive elements this should be avoided (and without additional ARIA code are a fail under WCAG).
Focus WithinAn element which contains an element that has keyboard focus.:focus-withinAny element that contains links, buttons, or inputs can receive a focus-within state.
HoverAn element is being hovered over.:hoverLinks can receive a hover state. Buttons and form controls can too, and are often styled in this state. Note that most other elements can receive hover too (e.g. table rows, list items), but unless they are interactive elements applying hover styles should be done carefully.
ActiveA link or button is being used (i.e. on mousedown, before mouseup).:activeLinks and buttons can receive an active state. Form controls can too, but are seldom styled in this state. Note that an active link or button also has focus state.
DisabledA form control or link cannot be interacted with.[disabled] (for form controls) or aria-disabled="true" (for links)Form controls (buttons, text field, selects, etc.) can be disabled. They don't receive focus, but do receive hover and active states. Note that a elements (links) can be disabled using aria-disabled="true" or made inert by omitting the href attribute.
PressedA button is marked as 'pressed'.[aria-pressed="true"]Only buttons can receive this state, via aria-pressed="true". This is one way of doing a toggle switch.
CheckedAn option is selected in a radio or checkbox group.:checkedOnly radios and checkboxes can receive this state.
CurrentA nav item is the current one, or a step is the current one in a process.aria-current="page|step"Only links or text elements can receive this state, via aria-current="page|step".
SelectedA piece of widget is "selected" (e.g. a tab is selected in a tab group).aria-selected="true"Buttons or links can receive this state, via aria-selected="true".

Common confusions

Tabs

We visually highlight one tab in a set of tabs. It's clearest to say that the tab is selected. Saying it's 'active' could be confused with the active state of a link or button. Saying it's current is okay, but doesn't match the functionality.

Navigation items

We visually highlight one item in a navigation set. It's clearest to say that the item is the current item. Saying it's 'active' could be confused with the active state of the link when it's clicked on.

Button group

We visually highlight the chosen button in a button group. It's clearest to say that the chosen button is pressed since we'll use a button with aria-pressed="true".

Toggle button or switch

A toggle button has on and off states. In its 'on' state:

  • If the function is to change the UI of a page, it's clearest to say that the toggle is pressed since we'll use a button with aria-pressed="true".
  • If the function is to make a selection, it's clearest to say that the toggle is checked since we'll use checkbox with a checked state.

Ideally, we should use toggles for changing the UI and checkboxes for making a selection.

Disabled elements

Form controls can be disabled using the disabled attribute, and links can be disabled using aria-disabled="true".

More complex components like menu items and tabs will either be buttons or links, so can be disabled using one of these two approaches.

References