FieldSet

Shipping Field Set

/** this example does not use an extra script **/

<monster-field-set data-monster-option-labels-title="Shipping Details">
  <label for="field-set-demo-name">Name</label>
  <input id="field-set-demo-name" type="text" placeholder="Jane Doe" />

  <label for="field-set-demo-company" slot="extended">Company</label>
  <input
    id="field-set-demo-company"
    slot="extended"
    type="text"
    placeholder="Monster Inc."
  />

  <label for="field-set-demo-city">City</label>
  <input id="field-set-demo-city" type="text" placeholder="Berlin" />

  <label for="field-set-demo-vat" slot="extended">VAT ID</label>
  <input
    id="field-set-demo-vat"
    slot="extended"
    type="text"
    placeholder="DE123456789"
  />
</monster-field-set>

/** no additional stylesheet is defined **/

Compact Settings Field Set

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

const mode = document.getElementById("field-set-preferences-mode");
const notify = document.getElementById("field-set-preferences-notify");
const insured = document.getElementById("field-set-preferences-insured");
const summary = document.getElementById("field-set-preferences-summary");

notify.setOption("values.on", "enabled");
notify.setOption("values.off", "disabled");
notify.value = "enabled";

insured.setOption("values.on", "insured");
insured.setOption("values.off", "standard");
insured.value = "standard";

const render = () => {
  const notifications = notify.value === "enabled" ? "with updates" : "without updates";
  const insurance = insured.value === "insured" ? "insured" : "not insured";
  summary.textContent = "Summary: " + mode.value + " delivery, " + notifications + ", " + insurance + ".";
};

mode.addEventListener("change", render);
notify.addEventListener("monster-change", render);
insured.addEventListener("monster-change", render);
render();<script type="module">import "@schukai/monster/source/components/form/field-set.mjs";
import "@schukai/monster/source/components/form/toggle-switch.mjs";

const mode = document.getElementById("field-set-preferences-mode-run");
const notify = document.getElementById("field-set-preferences-notify-run");
const insured = document.getElementById("field-set-preferences-insured-run");
const summary = document.getElementById("field-set-preferences-summary-run");

notify.setOption("values.on", "enabled");
notify.setOption("values.off", "disabled");
notify.value = "enabled";

insured.setOption("values.on", "insured");
insured.setOption("values.off", "standard");
insured.value = "standard";

const render = () => {
  const notifications = notify.value === "enabled" ? "with updates" : "without updates";
  const insurance = insured.value === "insured" ? "insured" : "not insured";
  summary.textContent = "Summary: " + mode.value + " delivery, " + notifications + ", " + insurance + ".";
};

mode.addEventListener("change", render);
notify.addEventListener("monster-change", render);
insured.addEventListener("monster-change", render);
render();</script>

<div style="display:grid;gap:1rem;max-inline-size:34rem;">
  <monster-field-set
    id="field-set-preferences-demo"
    data-monster-option-labels-title="Delivery preferences"
    data-monster-option-features-multiplecolumns="false"
  >
    <label for="field-set-preferences-mode">Delivery mode</label>
    <select id="field-set-preferences-mode">
      <option value="standard">Standard</option>
      <option value="express">Express</option>
      <option value="pickup">Pickup</option>
    </select>

    <label for="field-set-preferences-notify">Notifications</label>
    <monster-toggle-switch id="field-set-preferences-notify"></monster-toggle-switch>

    <label for="field-set-preferences-insured" slot="extended">Shipment insurance</label>
    <monster-toggle-switch
      id="field-set-preferences-insured"
      slot="extended"
    ></monster-toggle-switch>
  </monster-field-set>

  <p id="field-set-preferences-summary" style="margin:0;"></p>
</div>

/** no additional stylesheet is defined **/

Component Design

The monster-field-set component is a customizable field set control designed for grouping form elements. By using the Shadow DOM, the component encapsulates its structure and styling, ensuring consistent design and preventing external styles from interfering.

The component provides a collapsible section and optional toggle functionality, making it ideal for organizing form elements into logical groups while allowing users to expand or collapse extended content.

Shadow DOM and Accessibility

The monster-field-set component employs the Shadow DOM to isolate its internal components, such as the header, toggle switch, and collapsible container. This ensures a predictable layout and styling regardless of external influences.

The header section includes accessible labels, and toggle switches allow users to expand or collapse content, enhancing the user experience for screen readers and assistive technologies.

Customizing Through Exported Parts

The monster-field-set component exposes internal parts for targeted customization through the part attribute. Developers can use CSS to style these parts individually.

Available Part Attributes

• control: Targets the main wrapper of the field set control.
• header: Styles the header section of the field set, including the title and toggle switch.
• content: Represents the main slot for form elements inside the field set.
• extended: Targets the collapsible extended content area, which can include additional elements.

Below is an example of how to customize the component's parts using CSS:

monster-field-set::part(control) {
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 16px;
    background-color: #f9f9f9;
}

monster-field-set::part(header) {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: bold;
    margin-bottom: 12px;
}

monster-field-set::part(content) {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

monster-field-set::part(extended) {
    background-color: #f1f1f1;
    padding: 12px;
    border-top: 1px solid #ccc;
}

Explanation of the Example

• monster-field-set::part(control): Styles the main container with a border, padding, and background color.
• monster-field-set::part(header): Customizes the header section, aligning the title and toggle switch.
• monster-field-set::part(content): Organizes the primary slot content into a two-column grid layout.
• monster-field-set::part(extended): Styles the collapsible extended section with a subtle background and top border.

Collapsible Content and Toggle Switch

The monster-field-set includes a toggle switch for expanding or collapsing extended content. The header provides a title and label for the toggle switch, ensuring clarity for users.

Developers can customize the toggle switch labels using the following options:

• labels.toggleSwitchOn: Text when the switch is turned on.
• labels.toggleSwitchOff: Text when the switch is turned off.
• labels.toggleSwitchLabel: The label displayed next to the toggle switch.

Accessibility

The monster-field-set is designed to support accessibility best practices, including:

• Semantically structured content for grouping form controls.
• Keyboard navigation for expanding or collapsing sections via the toggle switch.
• Accessible labels for both the header and toggle switch.

These features ensure an inclusive and user-friendly experience for users of assistive technologies.