@itenthusiasm/custom-elements

Robust, accessible, and progressively-enhanceable Web Components for common developer needs. Each component integrates seamlessly into your web applications, whether you use pure HTML/CSS/JS or you use a JS Framework.

Features and Benefits

• Framework Agnostic: Because the components in this library are built using only Custom HTMLElements, they work seamlessly in all JS Frameworks (and in pure-JS applications).
• Integrates with Native Web Forms: The components in this library integrate with the web's native <form> element, meaning that their values will be seen in the form's FormData and will be automatically sent to the server when the form is submitted — all without writing a single line of JS.
• Works with Various Form Libraries: These components emit standard DOM events like input and change, enabling them to work naturally with reputable form libraries (e.g., the Form Observer, Conform, and React Hook Form).
• Progressive Enhacement: Every form-associated Custom Element in this library progressively enhances the native form controls. This guarantees that your forms will always be fully operable and accessible, even if your users have JS disabled.
• Highly Customizable: These components are flexible enough to work with whatever CSS you provide, and their functionality can be enhanced or overriden through class extension.
• Performant: Unlike many other alternatives, these components have been cleverly designed to work without complex state management tools or aggressive DOM Tree manipulation. This makes them fast and memory-efficient.
• No Dependencies: The components in this library are built on the native web platform instead of extending other frameworks or libraries, guaranteeing your bundle size remains as small as possible.

Install

npm install @itenthusiasm/custom-elements

Components

Below are the components that this library currently provides. Each component has its own README which you can view to learn more about how the component operates.

Combobox

Progressively enhances the <select> element, transforming it into a stylable, (optionally) filterable combobox which meets WAI-ARIA's accessibility requirements. The Combobox component behaves just like the native form controls, meaning that it dispatches the standard input/change events, is associated with its owning form, and automatically participates in all form activity, including form submission.

Stackblitz Form Integration Demo

CheckboxGroup

Wraps a semantic group of checkbox <input> elements, progressively enhancing them with convenient features like group-level form validation and value management. The CheckboxGroup component behaves just like the native form controls, meaning that it dispatches the standard input/change events, is associated with its owning form, and automatically participates in all form activity, including form submission.

Stackblitz Demo