UI Component States

When a UI component, such as a button or a form field, is in the enabled state, it means that users can interact with it, click it, or input data into it. The enabled state signifies that the component is ready to receive user input and perform its intended function. For example, an enabled "Submit" button on a form allows users to submit their input, while an enabled text input field permits them to enter data.

This state is crucial for providing feedback and guidance to users, as it visually communicates which elements are currently accessible and functional. Following Material Design guidelines, selection controls appear the same in both enabled and selected states.^[1]

Elements in disabled states are not ready to be interacted with. Think of them as a “Sorry, we’re closed” sign on a business. When a UI component is in a disabled state, it appears grayed out or inactive, indicating that it cannot be interacted with at that moment, often due to certain conditions not being met, such as missing information or an ongoing process. This distinction helps users understand the application's behavior and aids in creating a smooth and intuitive user experience.

When an element is hovered over by a user’s cursor, it should change to its hover state. It gives users a visual cue that they can take some kind of action with the element.

Common hover state behaviors include changing the element's color, size, or appearance, such as highlighting a button, displaying additional information when hovering over a link, or causing an icon to animate.

Along with the hover state, the pressed state also helps create a well-rounded element. Because the pressed state usually only appears briefly — when a button or other element is currently being tapped or clicked — its importance is often overlooked. But it's a crucial indication for users that the system will respond as soon as the element is released.

The focused state is vital for accessibility. While some users will never see the focused state, those who use their voice or the Tab ↹ key to navigate an interface benefit from a visual cue that tells them which element is currently in focus.

Focused states are often shown with either a border around the element, an overlay, or a change to the element’s fill color.^[2] Be careful not to use a focused state that is styled too closely to other element states, so as not to confuse users.

The selected state indicates a user’s choice and is most commonly seen around elements like checkboxes or radio buttons. This state appears regardless of how a user made their choice, whether it was by tapping, clicking, using their voice, or with their keyboard.

Selected states should be made clear but not too prominently. Otherwise, they can distract users from surrounding elements. A simple border or color change could be enough.

Elements such as radio buttons or checkboxes should follow standard UI patterns to show they're selected (filled with a dot or checkmark, respectively).

Activated states show what users are currently viewing or interacting with — like a selected tab or an active filter in search results. They’re different from enabled states, which indicate elements that are available for interaction but not currently selected.

Activated states help users stay oriented by showing where they are in the interface. They’re often highlighted with overlays or color changes. Make sure they stand out clearly, but don’t overwhelm other visual elements.

When an interface includes draggable elements (such as being able to reorder a playlist), it’s essential to create a dragged state.^[3] When an element is held and moved from one place to another, it enters this state.

One of the most effective ways to indicate a dragged state is with a smooth shadow that indicates elevation as if the element was being lifted. Lowering the opacity of surrounding elements can also assist in this state. Be sure to include some visual cue for where the dragged element will be placed when it is released.

Like physical switches, interface switches can have both on and off states. The on state is immediate, taking effect right away. Color and overall appearance should change, clearly indicating whether the switch is on or off.

In the off state, the change should be immediate and the opposite of whatever the on state is. Think of how a switch can activate or turn off dark mode for example.

Regardless of what the switch does, it should be clear and explicit which direction is on and which direction is off. Note that on states (and off states) are sometimes used on UI elements other than switches, such as a button that turns a microphone or camera on and off in an app like Zoom. The same guidelines for clearly indicating the states still apply in such cases.^[4]

Error states are activated when a user makes a mistake or something in the interface fails to work. These are particularly useful in forms when a user either enters invalid data or misses a required field. Error messages associated with error states should be polite and unobtrusive, but also clearly state the problem. Using a shade of red (not too bright) or some other contrasting colors and soft shadows around the problem area works perfectly.

Include inline error messages in real-time rather than error messages only triggered when the user submits a form. It’s less frustrating for the user and saves them time and effort.