What "HowTo: Components" Is (and Isn't)

HowTo: Components is an educational collection of web components that implement common UI patterns. Each component is presented as a self-contained, densely commented reference implementation meant for study rather than direct use. To be clear from the start: these are not a UI library and should not be used in production.

The current set includes three components:

  • <howto-checkbox>: represents a boolean option in a form, allowing a user to toggle between checked and unchecked states.
  • <howto-tabs>: limits visible content by splitting it into multiple panels.
  • <howto-tooltip>: a popup that shows information related to an element when that element receives keyboard focus or mouse hover.

Design Goals

The implementations target several specific qualities: accessibility, performance, visual flexibility, and maintainability. Because each component is entirely standalone, any one of them can serve as a reference for building similar elements.

Accessibility First

The code closely follows the WAI ARIA Authoring Practices, a guide for applying the Accessible Rich Internet Application standard (ARIA). If ARIA is unfamiliar territory, the authors suggest reviewing an introduction to semantics and ARIA before reading the code. Each component links to the relevant section of the Authoring Practices, which is worth reading before diving into the source.

Performance Matters

"Performance" can be a broad term, but for the <howto> implementations it means one specific thing: animations should consistently run at 60fps, including on mobile devices.

Minimal, Functional Styling

The components avoid decoration wherever possible, keeping only the styles required for layout or to signal an active or selected state. This keeps the code limited to what is functionally necessary. Where a style is essential to the component's operation, a comment explains the requirement.

Readability as a Feature

Since this is a reference resource, extra effort went into writing clear, easily understood code with thorough comments.

What This Collection Deliberately Avoids

Not a Distribution Package

The <howto> components are not published on npm, bower, or any other package manager. They exist only as teaching material. To keep the code terse and readable, they rely on modern JavaScript APIs and target modern browsers that support the Web Components standards. The intent is that you read these implementations and adapt them for your own projects.

No Long-Term API Guarantees

Nothing here should be depended on directly. The implementation and API of any element may change drastically as better approaches surface. This project is meant to be a living document for exploring and discussing best practices in building web UIs.

Not an Exhaustive Catalog

The current set does not cover every component in the WAI ARIA Authoring Practices, and likely never will. However, applying the principles demonstrated in these examples should allow the reader to build the missing components themselves.