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.
Our Form System is built from a set of very fundamental building blocks:
Form controls are the most fundamental building blocks of our Form System.
They are the fundament of both
fieldsets and provide a normalized, predictable API throughout the whole form. Every form element inherits from
FormControlMixin creates the default html structure and accessibility is designed to be used in conjunction with the ValidateMixin and the FormatMixin.
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
fieldsets, and the
Platform fields (wrappers)
- LionInput, a wrapper for
- LionTextarea, a wrapper for
- LionSelect, a wrapper for
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
- 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
- LionInputIban, an ING specific for an input with IBAN numbers.
- LionInputRange, an alternative for
- LionInputStepper, an alternative for
- 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
- LionOption, an alternative for
- LionRadio, a wrapper for
- LionSwitch, a custom implementation of a switch.
Which contains the following features:
- Get or set the value of the choice -
- Get or set the modelValue (value and checked-state) of the choice -
- Pre-select an option by setting the
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
- LionCheckboxGroup, a wrapper component for multiple checkboxes.
- LionRadioGroup, a wrapper component for multiple radio inputs.