Form: Overview

This page should be used as a starting point when first using the Form System. It provides an overview of its essential building blocks and provides links to detailed explanations of most of its core concepts.

Building Blocks

Our Form System is built from a set of very fundamental building blocks: form controls, fields and fieldsets.

Form Controls

Form controls are the most fundamental building blocks of our Form System. They are the fundament of both fields, and fieldsets and provide a normalized, predictable API throughout the whole form. Every form element inherits from FormControlMixin.

FormControlMixin creates the default html structure and accessibility is designed to be used in conjunction with the ValidateMixin and the FormatMixin.

Fields

Fields (think of an input, textarea, select) are the actual form controls the end user interacts with. They extend LionField, which in turn uses the FormControlMixin. Fields provide a normalized API for both platform components and custom made form controls.

On top of this, they feature:

• formatting/parsing/serializing of view values.
• Advanced validation possibilities.
• Creation of advanced user interaction scenarios via interaction states.
• Provision of labels and help texts in an easy, declarative manner.
• Accessibility out of the box.
• Advanced styling possibilities: map your own Design System to the internal HTML structure. Form controls are the most fundamental building block of the Forms. They are the basis of both fields and fieldsets, and the form itself.

Platform fields (wrappers)

• LionInput, a wrapper for <input>.
• LionTextarea, a wrapper for <textarea>.
• LionSelect, a wrapper for <select>.

Custom fields (wrappers)

Whenever a native form control doesn't exist or is not sufficient, a custom form field should be created. One could think of components like:

• LionCombobox, a custom implementation of a combobox.
• LionDate, an alternative for <input type="date">.
• LionDatepicker, an alternative for <input type="date"> including a calendar dropdown.
• LionListbox, a custom implementation of a listbox.
• LionInputAmount, an alternative for <input type="number"> special for amounts.
• LionInputEmail, an alternative for <input type="email">.
• LionInputIban, an ING specific for an input with IBAN numbers.
• LionInputRange, an alternative for <input type="range">.
• LionInputStepper, an alternative for <input type="number">.
• LionSelectRich, an alternative for <select> with multiline options.

Choice Input Fields

For form controls which return a checked-state you can use the lion-choice-input mixin. It is used in:

• LionCheckbox, a wrapper for <input type="checkbox">.
• LionOption, an alternative for <option>.
• LionRadio, a wrapper for <input type="radio">.
• LionSwitch, a custom implementation of a switch.

Which contains the following features:

• Get or set the value of the choice - choiceValue().
• Get or set the modelValue (value and checked-state) of the choice - .modelValue.
• Pre-select an option by setting the checked boolean attribute.

Fieldsets

Fieldsets are groups of fields. They can be considered fields on their own as well, since they partly share the normalized API via FormControlMixin. Fieldsets are the basis for:

• LionFieldset, a wrapper around multiple input fields or other fieldsets.
• LionForm, enhances the functionality of the native <form> component.
• LionCheckboxGroup, a wrapper component for multiple checkboxes.
• LionRadioGroup, a wrapper component for multiple radio inputs.

Other Resources

• Model Value
• Formatting and parsing
• Interaction states
• Validation System