@lion/field

Form Fundaments

🛠 Status: Pilot Phase

Lion Web Components are still in an early alpha stage; they should not be considered production ready yet.

The goal of our pilot phase is to gather feedback from a private group of users. Therefore, during this phase, we kindly ask you to:

• not publicly promote or link us yet: (no tweets, blog posts or other forms of communication about Lion Web Components)
• not publicly promote or link products derived from/based on Lion Web Components

As soon as Pilot Phase ends we will let you know (feel free to subscribe to this issue https://github.com/ing-bank/lion/issues/1)

Form controls are the most fundamental building block of the Forms. They are the basis of both fields and fieldsets, and the form itself.

Fields

Fields are the actual form controls the end user interacts with. They extend the Field class, which on its turn uses the FormControlMixin. Fields provide a normalized, predictable API for platform components and custom made form controls. On top of this, they feature:

• data synchronization with models
• formatting 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
• better focus management
• accessibility out of the box
• advanced styling possibilities: map your own Design System to the internal HTML structure

Platform fields (wrappers)

• 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">

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:

• slider
• combobox
• autocomplete
• etc...

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
• LionForm
• LionRadioGroup
• LionCheckboxGroup

Other Resources

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