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 chapters | State CSS class | When to use |
|---|---|---|
| activated | is-activated | |
| mouseover | :hover | Used when the user hovers the cursor over an element. |
| focus | :focus, is-focused | Used when the focus is set on an element either via tab navigation or clicking. |
| visited | :visited | Used when a hyperlink was already clicked before (as long as browser history is not cleared/reset). |
| pressed | :active | Used 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. |
| disabled | is-disabled | Used when an otherwise clickable element is disabled for clicking or focusing. |
| current | is-current | Used when e.g. a tab from a group of tabs is selected, a paging item from a group of pages is currently highlighted, etc. |
| readonly | is-readonly | Use when an element / value is selectable but not changeable, e.g. an input field. |
| expanded | is-expanded | Used when a drop-down, accordion, container, etc. is expanded; opposite of collapsed. |
| collapsed | is-collapsed | Used when a dropdown, accordion, container, etc. is collapsed; opposite of expanded. |
| hidden | is-hidden | Used when a usually visible element is hidden (e.g. a detail column on mobile devices). |
| shown | is-shown | Used when a usually hidden element is shown (e.g. a loading/saving indicator). |
| valid | is-valid | Used when something that is invalid is changing its state to valid, e.g. a numeric value. |
| invalid | is-invalid | Used when something empty or valid is becoming something invalid, e.g. an invalid email address typed into an input field. |
| required | is-required | Used to indicate something mandatory, e.g. a field, parts of a form, etc. |
| selected | is-selected | Used when an item is selected / clicked from a group of items. |
| error/alert | is-error, is-alert | Used for e.g. failure notifications, validations. |
| warning | is-warning | Used to notify about potential trouble or during unexpected behavior. |
| success | is-success | Used to inform about successful completion. |
| info | is-info | Used for useful and relevant neutral information. |