Interaction state

A user interface has to respond to user input in many ways.

Therefore, the CSS framework offers several states for each pattern to interact with. In order to understand the naming definitions of these states and to know which states are available, we agreed on a standardized naming scheme for these.

Why a naming scheme for states?

Since a lot of CSS properties for states are technical terms that reflect very specific scenarios with web applications, we decided to use more generic terms throughout the patterns chapters. These work for far more scenarios and are not restricted to web pages, programming languages or devices. In order to understand which state is meant in a pattern description and when to use each we offer a matching table below:

States and state classes

State name in patterns chaptersState CSS classWhen to use
mouseover:hoverUsed when the user hovers the cursor over an element.
focus:focus, is-focusedUsed when the focus is set on an element either via tab navigation or clicking.
visited:visitedUsed when a hyperlink was already clicked before (as long as browser history is not cleared/reset).
pressed:activeUsed when the mouse is pressed down on a clickable element, or touched with the finger on a touch device or while the space bar on a keyboard is pressed after a clickable element was focused.
disabledis-disabledUsed when an otherwise clickable element is disabled for clicking or focusing.
currentis-currentUsed when e.g. a tab from a group of tabs is selected, a paging item from a group of pages is currently highlighted, etc.
readonlyis-readonlyUse when an element / value is selectable but not changeable, e.g. an input field.
expandedis-expandedUsed when a drop-down, accordion, container, etc. is expanded; opposite of collapsed.
collapsedis-collapsedUsed when a dropdown, accordion, container, etc. is collapsed; opposite of expanded.
hiddenis-hiddenUsed when a usually visible element is hidden (e.g. a detail column on mobile devices).
shownis-shownUsed when a usually hidden element is shown (e.g. a loading/saving indicator).
validis-validUsed when something that is invalid is changing its state to valid, e.g. a numeric value.
invalidis-invalidUsed when something empty or valid is becoming something invalid, e.g. an invalid email address typed into an input field.
requiredis-requiredUsed to indicate something mandatory, e.g. a field, parts of a form, etc.
selectedis-selectedUsed when an item is selected / clicked from a group of items.
error/alertis-error, is-alertUsed for e.g. failure notifications, validations.
warningis-warningUsed to notify about potential trouble or during unexpected behavior.
successis-successUsed to inform about successful completion.
infois-infoUsed for useful and relevant neutral information.
Except where otherwise noted, content on this site is licensed under the Development License Agreement.
Back to top