Navigation Back to home

FieldSet

A field set control

Import
the javascript logo
import { FieldSet } from "@schukai/monster/source/components/form/field-set.mjs";
Source
the git logo
Package
the npm logo
Since
3.65.0

Introduction

The FieldSet component, part of the Monster library, is a powerful web control designed to group related form elements under a common frame. This enhances the organization of forms, making them more understandable and navigable for users. The component is highly customizable, suitable for dynamic form structures where sections might need to be shown or hidden based on user interactions.

Key Features

  • Logical Grouping: Facilitates the grouping of related form elements, promoting better form structure and user comprehension.
  • Collapsible Sections: Offers collapsible functionality, allowing users to hide or show sections of the form as needed, which is especially useful for lengthy forms.
  • Extended Fields: Supports extended fields that can be dynamically shown or hidden, providing flexibility in how information is collected and displayed.
  • Customizable Appearance: Comes with extensive styling options to match the design of any application, ensuring visual consistency across different forms.
  • Accessibility: Built with accessibility in mind, ensuring that all users, regardless of their abilities, can interact with the form elements effectively.

Improving the user experience

The FieldSet component significantly improves the user experience by organizing form elements into clearly defined sections. This structure not only makes complex forms easier to understand and navigate but also enhances the overall aesthetic of the forms. Its collapsible feature allows users to focus on relevant sections without being overwhelmed by information, which is crucial in improving form completion rates and accuracy.

Efficiency in the development process

Integrating the FieldSet component into web projects simplifies the development process by providing a modular, reusable structure for creating complex forms. Developers can easily implement collapsible sections and manage extended fields without the need to write additional JavaScript. This not only speeds up the development process but also reduces errors and enhances maintainability of the code.

Field Set Simple

Javascript

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

HTML

/** this example does not use an extra html file **/

Stylesheet

/** 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.

HTML Structure

<monster-field-set></monster-field-set>

JavaScript Initialization

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

Exported

FieldSet

Derived from

CustomControl

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 CustomControl.

Option
Type
Default
Description
templates
object
Template definitions
templates.main
string
undefined
Main template
labels
object
undefined
Label definitions
actions
object
Callbacks
actions.click
string
throw Error
features
object
Features
features.multipleColumns
boolean
true
classes
object
undefined
CSS classes
disabled
boolean
false

  • 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 CustomControl.

  • 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 CustomControl.

State query methods

value()
The current value of the form control.
e = document.querySelector("monster-field-set");
console.log(e.value);
value(value)
Parameters
  • value
Throws
  • {Error} unsupported type
Set the value of the form control. ``e = document.querySelector('monster-field-set'); e.value=1``

Static methods

[instanceSymbol]()
Returns
  • {symbol}
This method is called by the instanceof operator.
formAssociated()
Returns
  • {boolean}
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]()
Returns
  • {Components.Form.FieldSet

Other methods

blur()
The Button.blur() method removes focus from the internal element.
click()
The FieldSet.click() method simulates a click on the internal element.
focus(options)
Parameters
  • options {object}: options
The Button.focus() method sets focus on the internal element.

Events

This component does not fire any public events. It may fire events that are inherited from its parent classes.

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