States
Using the correct state or combination of states for a UI element helps users to recognize possible options and see where they need to take action.
Types of State
UI elements can have different types of state. Follow the links below to see the guidelines for each state.
State | Description | Variants |
Component State | Determines the interactivity and visibility of the component. | Enabled Disabled Read Only Hidden |
Focus State | Determines which component receives the user‘s input. The focus state is most important for keyboard interaction. | Focused Unfocused |
Interaction State | Indicates the current the interaction state of a component. | Regular Hover Down |
Selection State | The selection state is applied after the user selects the element to distinguish it from other elements. | Selected Unselected Indeterminate |
Value State | Shows the semantic meaning of a UI element in a specific use case and context. | None Positive Negative Critical Information Custom |
Combining States
Certain states can also be combined. For details, see State Combinations.