States

Intro

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.

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 Warning Information Custom

Certain states can also be combined. For details, see State Combinations.