4.1 KiB
Form System Overview
export default {
title: 'Forms/System/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, texarea, 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 offer:
- 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
Platform fields (wrappers)
Platform field wrappers add all of the functionality described above to native form elements.
- LionInput, a wrapper for
<input> - LionTextarea, a wrapper for
<textarea> - LionSelect, a wrapper for
<select> - LionRadio, a wrapper for
<input type="radio"> - LionCheckbox, a wrapper for
<input type="checkbox"> - LionInputRange, a wrapper for
<input type="range">
Dedicated fields
Dedicated fields are less generic fields in a sense that they by default expect a certain type of modelValue. This means that they have validators, parsers and formatters preconfigured.
Custom fields
Instead of wrapping native elements, this category of fields contains custom built form elements.
- LionSelectRich, an advanced (rich) version of
<select>
One could also think of components like:
- listbox
- combobox
- autocomplete
- etc...
For more information about writing a custom field, please see How to write a custom field
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 at the base of: