UI Component States
Learn how to guide users and give useful indications on how to interact with the interface components
Components within a UI design exist within different states (including enabled, hover, or disabled, among others). These component states give users useful indications on how to interact with a product and what their interactions accomplish.
Effectively using subtle design changes to differentiate between the states of elements in your UI provides valuable visual cues to your users. These cues guide them through the actions they should take and engage them more than designs that don’t provide any feedback.
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
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
Pro Tip: Including both “hover on” and “hover off” animations can provide further positive interaction for users.
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
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
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
Elements such as radio buttons or checkboxes should follow standard
Activated states show what users are currently viewing or interacting with — like a selected
Activated states help users stay oriented by showing where they are in the interface. They’re often highlighted with overlays or
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.
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
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
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.
Pro Tip: Use success states to provide positive feedback to users when they successfully complete a task or action within the interface. Consider using a soothing color palette, such as shades of green, to evoke a positive response.
References
- Material Design | Material Design
- Material Design | Material Design
- Drag and Drop for Design Systems | Medium
- State-Switch Controls: The Infamous Case of the "Mute" Button | Nielsen Norman Group