States
The kinetic lifecycle of digital interaction. How interfaces transition across enabled, disabled, focused, pressed, hovered, dragged, and selected states with mechanical conviction.
Enabled (Idle)
Disabled (Inert)
Focused (Keyboard Ring)
Pressed (Mechanical)
Hovered (Pre-Intent)
Dragged (Physics Spring)
Selected (Form Commitment)
The Six Foundational States
Digital elements are not static shapes. They exist in a continuous mechanical lifecycle responding to sight, touch, keyboard traversal, and physical movement.
Realtime Component Feedback · Enabled
Hover, click, or tab into elements to test responsiveness.
Enabled State
Trigger Mechanism
Default idle lifecycle waiting for user engagement
Visual Signature
100% opacity, crisp boundary affordance, pointer cursor, full contrast ratio
Human Affordance Law
The component promises immediate receptivity to click, touch, or keystrokes.
Implementation Rule
Default baseline for all interactive atoms. Must maintain standard WCAG AAA contrast without decorative dimming.
The “Selected” State in Forms
Unlike transient states that dissolve upon mouse release, Selected represents an enduring contract between user intent and system configuration across Switch, RadioGroup, and Checkbox primitives.
Switch
Instant Execution
Instantaneous Binary
Takes effect immediately without an explicit submit action. Best for instant system activations like toggling dark mode or live autoscaling.
Radio Group
Single Choice
Mutually Exclusive
Requires picking exactly one option from a visible set of 2 to 5 choices. Selecting any choice automatically deselects the alternative.
Checkbox
Independent Sets
Additive Multi-Select
Allows independent election of zero, one, or multiple items. Supports binary and indeterminate states prior to batch form submission.
Form State Machine Studio
Test live Switch, Radio, and Checkbox primitives from 'get-elementa-ui'
Click the switch below to toggle autoscaling. Notice the smooth mechanical track translation and aria-checked update.
Dynamically scales worker replicas between 2 and 16 based on traffic.
Selection Component Selector Matrix
How to choose the correct selection primitive based on cognitive impact and execution immediacy.
| Primitive | When to Use | Cognitive & System Behavior | Keyboard Navigation | WCAG Semantic |
|---|---|---|---|---|
| Switch | Immediate Binary Activation | The choice takes effect the millisecond it is toggled (e.g. WiFi on/off, dark mode, background sync). No submit button is needed or expected. | Spacebar / Click | role="switch" · aria-checked |
| RadioGroup | Exclusive Mutually Closed Options | The user must pick exactly one option from 2 to 5 distinct choices. All options should be visible at once so the user can weigh tradeoffs. | Arrow Keys · Spacebar | role="radiogroup" · aria-checked |
| Checkbox | Additive Multi-Item Selection | Users may select zero, one, or multiple items from a list, or acknowledge terms of service before an asynchronous form submission. | Spacebar / Click | role="checkbox" · aria-checked |
State Resolution Hierarchy
What happens when a focused element is hovered? Or when a dragged card passes over a disabled zone? The Elementa state cascade defines strict deterministic resolution order.
Disabled / Inert
Cancels all hover, focus, press, and drag behaviors. Zero pointer-events, zero keyboard tab stops. No exceptions.
Focused
If an element is simultaneously hovered and focused, the focus outline retains 100% visual supremacy to protect keyboard landmark orientation.
Pressed / Dragged
Mechanical depression and kinetic translation override static hover styling during active pointer-down displacement.
Hovered
Lifts the element upon cursor intersection. Reverts immediately when pointer leaves boundary.
Enabled (Idle)
The default visual footprint awaiting user stimulus.
Golden Laws of Elementa State Hygiene
Rules that every component engineer and interaction designer must enforce.
Zero Phantom Feedback
Never trigger pressed or hovered styling on a component that cannot actually execute an action. If clicking does nothing, the component must remain inert.
Synchronous ARIA Mirroring
A visual state must never exist without its corresponding DOM attribute. Sighted and screen-reader users must never perceive divergent realities.
aria-disabledaria-checkedaria-selectedSpring Physics on Release
Transient interactions (hover release, pointer up, drag drop) must resolve via organic spring curves rather than abrupt linear snaps. Elementa uses damped harmonic springs for lifelike tactile realism.