Cosmos form input components like the Radio Group or Checkbox are wrappers around native form controls rendered inside the web component's Shadow DOM. By design, the Shadow DOM isolates the native form inputs so that one can not listen to some native input events directly or operate on their native API.

Cosmos form input components provide custom events and APIs to bridge the Shadow DOM boundary to allow the integration and syncing of a native form input state with an application.

Updating an application's state on behalf of events that are emitted when users interact with an input – usually the change or input event – is essential when integrating a form input into an application.

Unfortunately, it's especially those kinds of events that cannot pass the Shadow DOM of a web component when bubbling up through the DOM.

Cosmos provides a set of custom events to replace native events commonly used when integrating form inputs into rich applications and cannot pass the Shadow DOM root of a web component. They share the name with the native event they represent but are prefixed with input– the change event becomes the inputchange event.

The API documentation of Cosmos form input components provides a full list of available custom events.

Like events, there are certain APIs that are isolated by the Shadow DOM rendered by Cosmos web components but are inevitable when integrating a form input into an application.

Cosmos form input components expose a set of commonly used methods and prefix them with input to mimic a native HTML input's API – checkValidity() becomes inputCheckValidity()

The API documentation of Cosmos form input components provides a full list of available methods.