Form

A structured form container for Monster controls, validation flows and consistent submission handling.

Import

import { Form } from "@schukai/monster/source/components/form/form.mjs";

Source

View source code

Package

@schukai/monster

Since

1.0.0

Name

Introduction

The Monster Form component is the outer structure for grouped controls, validation flow and submission behavior. Use it when multiple Monster inputs should behave like one coherent form instead of as isolated controls.

When to use Form

Use it for structured data entry: Registration, checkout, settings and admin forms are typical cases.
Use it when validation and submission belong together: The component helps keep one clear workflow boundary.
Do not use it as a generic wrapper: If there is no submission or state change, a plain layout container may be enough.

Typical mistakes

Keep submission intent explicit. Users should understand what the form changes, when it validates and what happens after success or failure.

Form Simple

This example wraps two native inputs in monster-form and mirrors the current values into a small JSON preview.

Name Email

Waiting for input…

Javascript

import "@schukai/monster/source/components/form/form.mjs";
import "@schukai/monster/source/components/form/field-set.mjs";

const form = document.getElementById("form-demo");
const output = document.getElementById("form-demo-output");

const render = () => {
  const data = Object.fromEntries(new FormData(form).entries());
  output.textContent = JSON.stringify(data, null, 2);
};

form.addEventListener("input", render);
render();<script type="module">import "@schukai/monster/source/components/form/form.mjs";
import "@schukai/monster/source/components/form/field-set.mjs";

const form = document.getElementById("form-demo-run");
const output = document.getElementById("form-demo-run-output");

const render = () => {
  const data = Object.fromEntries(new FormData(form).entries());
  output.textContent = JSON.stringify(data, null, 2);
};

form.addEventListener("input", render);
render();</script>

HTML

<div style="display:grid;gap:1rem;">
  <monster-form id="form-demo">
    <monster-field-set data-monster-option-labels-title="Profile">
      <label for="form-demo-name">Name</label>
      <input id="form-demo-name" type="text" name="name" value="Jane Doe" />

      <label for="form-demo-email">Email</label>
      <input
        id="form-demo-email"
        type="email"
        name="email"
        value="jane@example.com"
      />
    </monster-field-set>
  </monster-form>

  <pre
    id="form-demo-output"
    style="margin:0;padding:0.75rem;border:1px solid var(--monster-color-primary-2);border-radius:var(--monster-border-radius);background:var(--monster-bg-color-primary-1);color:var(--monster-color-primary-1);"
  >Waiting for input…</pre>
</div>

Stylesheet

/** no additional stylesheet is defined **/

Open in playground

Component Design

The monster-form component is a container for grouping form elements. Built using the Shadow DOM, it encapsulates the form's structure and styling, ensuring isolation and consistency. Developers can use this component to wrap form controls while maintaining control over styling and layout.

Shadow DOM and Accessibility

The use of the Shadow DOM ensures that the internal form structure is isolated from the global styles of the application. This encapsulation prevents unintended interference from external CSS or scripts while providing a predictable layout for the form.

The component follows accessibility standards by allowing developers to use native form elements such as input, select, and textarea inside the form. It also supports reportValidity for validating child form elements.

Customizing Through Exported Parts

The monster-form component exposes internal parts for styling using the part attribute. This allows targeted CSS customization of the form container and its related elements.

Available Part Attributes

control: Represents the main control wrapper around the form.
form: Targets the internal form element, allowing you to apply custom styles to the form layout.

Below is an example of how to customize the form using CSS:


monster-form::part(form) {
    border: 1px solid #ccc;
    padding: 20px;
    border-radius: 6px;
    background-color: #fafafa;
}

monster-form::part(control) {
    margin: 10px 0;
    display: flex;
    flex-direction: column;
}

Explanation of the Example

monster-form::part(form): Styles the internal form element with padding, a border, and a light background.
monster-form::part(control): Adds spacing and organizes the main form container into a column layout.

Accessibility

The monster-form component is designed to ensure accessibility for all users:

Native form elements retain their default behaviors and semantics for screen readers.
Keyboard navigation works seamlessly within the form container.
The reportValidity method allows developers to validate child elements programmatically, ensuring proper error feedback.

By providing a well-structured form container and supporting accessible form controls, the monster-form component ensures an inclusive user experience.

HTML Structure

<monster-form></monster-form>

JavaScript Initialization

const element = document.createElement('monster-form');
document.body.appendChild(element);

Exported

Form

Derived from

DataSet

Options

The Options listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class. Therefore, it inherits Options from these parent classes. If you cannot find a specific Options in this list, we recommend consulting the documentation of the DataSet.

Option

Type

Default

Description

templates

object

undefined

Template definitions

templates.main

string

undefined

Main template

classes

object

undefined

Class definitions

classes.form

string

undefined

Form class

writeBack

object

undefined

Write back definitions

writeBack.events

string[]

undefined

Write back events

bind

object

undefined

Bind definitions

reportValidity

object

undefined

Report validity definitions

reportValidity.selector

string

undefined

Report validity selector

features.mutationObserver

boolean

undefined

Mutation observer feature

features.writeBack

boolean

undefined

Write back feature

features.bind

boolean

undefined

Bind feature

since
deprecated

Properties and Attributes

The Properties and Attributes listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits Properties and Attributes from these parent classes. If you cannot find a specific Properties and Attributes in this list, we recommend consulting the documentation of the DataSet.

data-monster-options: Sets the configuration options for the collapse component when used as an HTML attribute.
data-monster-option-[name]: Sets the value of the configuration option [name] for the collapse component when used as an HTML attribute.

Methods

The methods listed in this section are defined directly within the class. This class is derived from several parent classes, including the CustomElement class and ultimately from HTMLElement. Therefore, it inherits methods from these parent classes. If you cannot find a specific method in this list, we recommend consulting the documentation of the DataSet.

Behavioral methods

refresh()3.70.0

Returns

{Promise}

This method is called when the component is created.

Static methods

getCSSStyleSheet()

Returns

{CSSStyleSheet[]}

getTag()

Returns

{string}

Lifecycle methods

Lifecycle methods are called by the environment and are usually not intended to be called directly.

[assembleMethodSymbol]()

Other methods

reportValidity()2.10.0

Returns

{boolean}

Run reportValidation on all child html form controls.

Events

The component emits the following events:

monster-options-set
monster-selected
monster-change
monster-changed

For more information on how to handle events, see the mdn documentation.

The current width of the area is too small to display the content correctly.