States
Component states in UI design refer to the various conditions or interactions a UI element can undergo while being used by the enduser. These states allow designers and developers to depict how components visually and functionally respond to the users actions, providing feedback and enhancing the user experience by being consistent.
Important
Not every component supports all available states. Only states that are supported by a specific component will be implemented.
The onyx design system follows the web standards for component states to provide the easiest usage and implementation.
Below you can find a list of available onyx states. Note: The list does not contain all technical available states but only relevant ones for onyx components.
State | Description | Example |
|---|---|---|
| default | Matches one or more UI elements that are the default among a set of elements. | |
| hover | Matches when a user designates an item with a pointing device. | Holding the mouse pointer over the component. |
| active | Matches when a component is being activated by the user. | Component is clicked on. |
| focus | Matches when an element has focus. | Input is focused so its ready to be typed in. |
| focus-visible | Matches when an element has focus and the user agent (e.g. the browser) identifies that the element should be visibly focused. | Input is focussed using the tab-key on the keyboard so it gets a visible "focus ring". |
| enabled | Represents a user interface element that is in a enabled state (can be activated e.g. selected, clicked on, typed into etc.). | Input element that can be typed in. |
| disabled | Represents a user interface element that is in a disabled state. | Disabled button. |
| valid | Matches an element with valid contents. | Input element with the type email that contains a validly formed email address or an empty value if the control is not required. |
| invalid | Matches an element with invalid contents. | Input element with the type email that contains a number. |
| user-valid | Matches an element with valid contents but only when the user has interacted with it. | Input element with the type email where the user has entered a validly formed email address or an empty value if the control is not required. |
| user-invalid | Matches an element with invalid contents but only when the user has interacted with it. | Input element with the type email where the user has entered a number. |
| required | Matches when a form element is required. | Required input element. |
| optional | Matches when a form element is optional. | Optional input element. |
| blank | Matches a user-input element which is empty, containing an empty string or other null input. | Empty input. |
| placeholder-shown | Matches an input element that is displaying placeholder text. | Placeholder text of an input element. |
| checked | Matches when elements such as checkboxes and radio buttons are toggled on. | Toggled checkbox. |
| indeterminate | Matches UI elements when they are in an indeterminate state. | Indeterminate checkbox. |
| in-range | Applies to elements with range limitations when the value is in the allowed range. | Slider with allowed range 1-100 and value 42. |
| out-of-range | Applies to elements with range limitations when the value is outside of the allowed range. | Slider with allowed range 1-100 and value 500. |
| autofill | Matches when an input that has been autofilled by the browser. | Input that has been autofilled by the browser. |
| read-only | Represents any element that cannot be changed by the user. | Readonly input. |
| read-write | Represents any element that is user-editable. | Editable input. |