UNPKG

@lion/ui

Version:

A package of extendable web components

github.com/ing-bank/lion/

ing-bank/lion

96 lines (69 loc) • 7.43 kB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
--- parts: - Overview - Form - Systems title: 'Form: Overview' eleventyNavigation: key: Systems >> Form >> Overview title: Overview order: 10 parent: Systems >> Form --- # Systems >> Form >> Overview ||10 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 control`s, `field`s and `fieldset`s. ### Form Controls `Form control`s are the most fundamental building blocks of our Form System. They are the fundament of both `field`s, and `fieldset`s 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](https://github.com/ing-bank/lion/blob/5f1d7166273cc724458c0239822cd454e16253fa/docs/fundamentals/systems/form/formatting-and-parsing.md) of view values. - Advanced [validation](https://github.com/ing-bank/lion/blob/5f1d7166273cc724458c0239822cd454e16253fa/docs/fundamentals/systems/form/validate.md) possibilities. - Creation of advanced user interaction scenarios via [interaction states](https://github.com/ing-bank/lion/blob/5f1d7166273cc724458c0239822cd454e16253fa/docs/fundamentals/systems/form/interaction-states.md). - 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 control`s are the most fundamental building block of the Forms. They are the basis of both `field`s and `fieldset`s, and the `form` itself. ### Platform fields (wrappers) - [LionInput](https://github.com/ing-bank/lion/blob/5f1d7166273cc724458c0239822cd454e16253fa/docs/components/input/overview.md), a wrapper for `<input>`. - [LionTextarea](https://github.com/ing-bank/lion/blob/5f1d7166273cc724458c0239822cd454e16253fa/docs/components/textarea/overview.md), a wrapper for `<textarea>`. - [LionSelect](https://github.com/ing-bank/lion/blob/5f1d7166273cc724458c0239822cd454e16253fa/docs/components/select/overview.md), a wrapper for `<select>`. ### Custom fields (wrappers) Whenever a native form control doesn't exist or is not sufficient, a [custom form field](https://github.com/ing-bank/lion/blob/5f1d7166273cc724458c0239822cd454e16253fa/docs/guides/how-to/create-a-custom-field.md) should be created. One could think of components like: - [LionCombobox](https://github.com/ing-bank/lion/blob/5f1d7166273cc724458c0239822cd454e16253fa/docs/components/combobox/overview.md), a custom implementation of a combobox. - [LionDate](https://github.com/ing-bank/lion/blob/5f1d7166273cc724458c0239822cd454e16253fa/docs/components/input-date/overview.md), an alternative for `<input type="date">`. - [LionDatepicker](https://github.com/ing-bank/lion/blob/5f1d7166273cc724458c0239822cd454e16253fa/docs/components/input-datepicker/overview.md), an alternative for `<input type="date">` including a calendar dropdown. - [LionListbox](https://github.com/ing-bank/lion/blob/5f1d7166273cc724458c0239822cd454e16253fa/docs/components/listbox/overview.md), a custom implementation of a listbox. - [LionInputAmount](https://github.com/ing-bank/lion/blob/5f1d7166273cc724458c0239822cd454e16253fa/docs/components/input-amount/overview.md), an alternative for `<input type="number">` special for amounts. - [LionInputEmail](https://github.com/ing-bank/lion/blob/5f1d7166273cc724458c0239822cd454e16253fa/docs/components/input-email/overview.md), an alternative for `<input type="email">`. - [LionInputIban](https://github.com/ing-bank/lion/blob/5f1d7166273cc724458c0239822cd454e16253fa/docs/components/input-iban/overview.md), an ING specific for an input with IBAN numbers. - [LionInputRange](https://github.com/ing-bank/lion/blob/5f1d7166273cc724458c0239822cd454e16253fa/docs/components/input-range/overview.md), an alternative for `<input type="range">`. - [LionInputStepper](https://github.com/ing-bank/lion/blob/5f1d7166273cc724458c0239822cd454e16253fa/docs/components/input-stepper/overview.md), an alternative for `<input type="number">`. - [LionSelectRich](https://github.com/ing-bank/lion/blob/5f1d7166273cc724458c0239822cd454e16253fa/docs/components/select-rich/overview.md), 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](https://github.com/ing-bank/lion/blob/5f1d7166273cc724458c0239822cd454e16253fa/docs/components/checkbox-group/overview.md), a wrapper for `<input type="checkbox">`. - LionOption, an alternative for `<option>`. - [LionRadio](https://github.com/ing-bank/lion/blob/5f1d7166273cc724458c0239822cd454e16253fa/docs/components/radio-group/overview.md), a wrapper for `<input type="radio">`. - [LionSwitch](https://github.com/ing-bank/lion/blob/5f1d7166273cc724458c0239822cd454e16253fa/docs/components/switch/overview.md), 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](https://github.com/ing-bank/lion/blob/5f1d7166273cc724458c0239822cd454e16253fa/docs/components/fieldset/overview.md), a wrapper around multiple input fields or other fieldsets. - [LionForm](https://github.com/ing-bank/lion/blob/5f1d7166273cc724458c0239822cd454e16253fa/docs/components/form/overview.md), enhances the functionality of the native `<form>` component. - [LionCheckboxGroup](https://github.com/ing-bank/lion/blob/5f1d7166273cc724458c0239822cd454e16253fa/docs/components/checkbox-group/overview.md), a wrapper component for multiple checkboxes. - [LionRadioGroup](https://github.com/ing-bank/lion/blob/5f1d7166273cc724458c0239822cd454e16253fa/docs/components/radio-group/overview.md), a wrapper component for multiple radio inputs. ## Other Resources - [Model Value](https://github.com/ing-bank/lion/blob/5f1d7166273cc724458c0239822cd454e16253fa/docs/fundamentals/systems/form/model-value.md) - [Formatting and parsing](https://github.com/ing-bank/lion/blob/5f1d7166273cc724458c0239822cd454e16253fa/docs/fundamentals/systems/form/formatting-and-parsing.md) - [Interaction states](https://github.com/ing-bank/lion/blob/5f1d7166273cc724458c0239822cd454e16253fa/docs/fundamentals/systems/form/interaction-states.md) - [Validation System](https://github.com/ing-bank/lion/blob/5f1d7166273cc724458c0239822cd454e16253fa/docs/fundamentals/systems/form/validate.md)