Headless Component
A component supplying behaviour and accessibility with no styling of its own.
A headless component provides the hard parts of an interactive control — keyboard handling, focus management, ARIA wiring, positioning, scroll locking — and no appearance whatsoever. The consumer supplies every pixel.
The appeal is that the difficult, easy-to-get-wrong half is shared while the differentiating half stays local. Getting a combobox's keyboard model, screen-reader semantics, and typeahead right is weeks of work and identical for everyone; its look is neither.
Choosing between libraries in this space tends to come down to the shape of their APIs rather than their feature lists. A single-value control that insists on an array type forces every consumer into an awkward unwrap. A control that exposes a "committed" event distinct from a continuous one is far easier to wire to expensive updates than one that fires on every increment. Whether the library ships any stylesheet at all determines whether adoption is a like-for-like swap or a visual migration.
The recurring hazards are portalling — see Portal — and honesty about types. A handler documented as receiving a value may genuinely receive nothing when the underlying list changes out from under the selection; typing that away rather than handling it produces a crash in a rare, real case.
See also6
Hand-picked in the note itself — the neighbours worth reading next.
UI Primitive
The small set of typed components through which all interface markup is expressed.
Design & Interface10 connections
Accessibility
Designing so that people with disabilities can use a thing, and the standards that make it checkable.
Design & Interface20 connections
ARIA
Attributes that describe roles, states, and relationships to assistive technology when HTML cannot.
Design & Interface10 connections
Focus Management
Deliberately controlling which element receives keyboard focus as an interface changes.
Design & Interface14 connections
Keyboard Navigation
Making every interactive affordance reachable and operable without a pointer.
Design & Interface12 connections
Design System
A shared vocabulary of tokens, primitives, and rules that makes independent work converge.
Design & Interface9 connections
Related2
Nearby in the graph rather than deliberately chosen. Looser, sometimes surprising.
Linked from13
Notes elsewhere in the wiki that reach for this one.
- AccessibilityDesign & Interface
Designing so that people with disabilities can use a thing, and the standards that make it checkable.
- ARIADesign & Interface
Attributes that describe roles, states, and relationships to assistive technology when HTML cannot.
- Container QueryDesign & Interface
Styling based on the size of an element's container rather than the viewport.
- contenteditableWeb Platform
The HTML attribute that makes an element directly editable, and the surface behind most rich-text editors.
- Design SystemDesign & Interface
A shared vocabulary of tokens, primitives, and rules that makes independent work converge.
- Document Object ModelWeb Platform
The live tree of objects a browser builds from a document, and the surface every UI framework writes to.
- Focus ManagementDesign & Interface
Deliberately controlling which element receives keyboard focus as an interface changes.
- Focus TrapDesign & Interface
Confining keyboard focus inside a modal surface so it cannot wander behind it.
- Keyboard NavigationDesign & Interface
Making every interactive affordance reachable and operable without a pointer.
- PortalWeb Platform
Rendering an element into a different part of the document than its logical parent.
- Semantic HTMLDesign & Interface
Using elements for their meaning, so the document conveys structure without extra description.
- Stacking ContextDesign & Interface
The nested coordinate system that decides what paints above what, and why z-index often does nothing.
- UI PrimitiveDesign & Interface
The small set of typed components through which all interface markup is expressed.