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.
|Focus||An element has keyboard focus.||Links, 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 |
|Focus Within||An element which contains an element that has keyboard focus.||Any element that contains links, buttons, or inputs can receive a focus-within state.|
|Hover||An element is being hovered over.||Links 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.|
|Active||A link or button is being used (i.e. on mousedown, before mouseup).||Links 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.|
|Disabled||A form control or link cannot be interacted with.||Form controls (buttons, text field, selects, etc.) can be disabled. They don't receive focus, but do receive hover and active states. Note that |
|Pressed||A button is marked as 'pressed'.||Only buttons can receive this state, via |
|Checked||An option is selected in a radio or checkbox group.||Only radios and checkboxes can receive this state.|
|Current||A nav item is the current one, or a step is the current one in a process.||Only links or text elements can receive this state, via |
|Selected||A piece of widget is "selected" (e.g. a tab is selected in a tab group).||Buttons or links can receive this state, via |
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.
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.
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
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
- 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.
Form controls can be disabled using the
disabled attribute, and links can be disabled using
More complex components like menu items and tabs will either be buttons or links, so can be disabled using one of these two approaches.