---
parts:
  - Overview
  - Form
  - Systems
title: 'Form: Overview'
eleventyNavigation:
  key: Systems >> Form >> Overview
  title: Overview
  order: 10
  parent: Systems >> Form
---

# 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 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/e45f5c198ccac32dc5c3fd5db6a9fc9fc3595c35/docs/fundamentals/systems/form/formatting-and-parsing.md) of view values.
- Advanced [validation](https://github.com/ing-bank/lion/blob/e45f5c198ccac32dc5c3fd5db6a9fc9fc3595c35/docs/fundamentals/systems/form/validate.md) possibilities.
- Creation of advanced user interaction scenarios via [interaction states](https://github.com/ing-bank/lion/blob/e45f5c198ccac32dc5c3fd5db6a9fc9fc3595c35/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/e45f5c198ccac32dc5c3fd5db6a9fc9fc3595c35/docs/components/input/overview.md), a wrapper for `<input>`.
- [LionTextarea](https://github.com/ing-bank/lion/blob/e45f5c198ccac32dc5c3fd5db6a9fc9fc3595c35/docs/components/textarea/overview.md), a wrapper for `<textarea>`.
- [LionSelect](https://github.com/ing-bank/lion/blob/e45f5c198ccac32dc5c3fd5db6a9fc9fc3595c35/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/e45f5c198ccac32dc5c3fd5db6a9fc9fc3595c35/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/e45f5c198ccac32dc5c3fd5db6a9fc9fc3595c35/docs/components/combobox/overview.md), a custom implementation of a combobox.
- [LionDate](https://github.com/ing-bank/lion/blob/e45f5c198ccac32dc5c3fd5db6a9fc9fc3595c35/docs/components/input-date/overview.md), an alternative for `<input type="date">`.
- [LionDatepicker](https://github.com/ing-bank/lion/blob/e45f5c198ccac32dc5c3fd5db6a9fc9fc3595c35/docs/components/input-datepicker/overview.md), an alternative for `<input type="date">` including a calendar dropdown.
- [LionListbox](https://github.com/ing-bank/lion/blob/e45f5c198ccac32dc5c3fd5db6a9fc9fc3595c35/docs/components/listbox/overview.md), a custom implementation of a listbox.
- [LionInputAmount](https://github.com/ing-bank/lion/blob/e45f5c198ccac32dc5c3fd5db6a9fc9fc3595c35/docs/components/input-amount/overview.md), an alternative for `<input type="number">` special for amounts.
- [LionInputEmail](https://github.com/ing-bank/lion/blob/e45f5c198ccac32dc5c3fd5db6a9fc9fc3595c35/docs/components/input-email/overview.md), an alternative for `<input type="email">`.
- [LionInputIban](https://github.com/ing-bank/lion/blob/e45f5c198ccac32dc5c3fd5db6a9fc9fc3595c35/docs/components/input-iban/overview.md), an ING specific for an input with IBAN numbers.
- [LionInputRange](https://github.com/ing-bank/lion/blob/e45f5c198ccac32dc5c3fd5db6a9fc9fc3595c35/docs/components/input-range/overview.md), an alternative for `<input type="range">`.
- [LionInputStepper](https://github.com/ing-bank/lion/blob/e45f5c198ccac32dc5c3fd5db6a9fc9fc3595c35/docs/components/input-stepper/overview.md), an alternative for `<input type="number">`.
- [LionSelectRich](https://github.com/ing-bank/lion/blob/e45f5c198ccac32dc5c3fd5db6a9fc9fc3595c35/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/e45f5c198ccac32dc5c3fd5db6a9fc9fc3595c35/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/e45f5c198ccac32dc5c3fd5db6a9fc9fc3595c35/docs/components/radio-group/overview.md), a wrapper for `<input type="radio">`.
- [LionSwitch](https://github.com/ing-bank/lion/blob/e45f5c198ccac32dc5c3fd5db6a9fc9fc3595c35/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/e45f5c198ccac32dc5c3fd5db6a9fc9fc3595c35/docs/components/fieldset/overview.md), a wrapper around multiple input fields or other fieldsets.
- [LionForm](https://github.com/ing-bank/lion/blob/e45f5c198ccac32dc5c3fd5db6a9fc9fc3595c35/docs/components/form/overview.md), enhances the functionality of the native `<form>` component.
- [LionCheckboxGroup](https://github.com/ing-bank/lion/blob/e45f5c198ccac32dc5c3fd5db6a9fc9fc3595c35/docs/components/checkbox-group/overview.md), a wrapper component for multiple checkboxes.
- [LionRadioGroup](https://github.com/ing-bank/lion/blob/e45f5c198ccac32dc5c3fd5db6a9fc9fc3595c35/docs/components/radio-group/overview.md), a wrapper component for multiple radio inputs.

## Other Resources

- [Model Value](https://github.com/ing-bank/lion/blob/e45f5c198ccac32dc5c3fd5db6a9fc9fc3595c35/docs/fundamentals/systems/form/model-value.md)
- [Formatting and parsing](https://github.com/ing-bank/lion/blob/e45f5c198ccac32dc5c3fd5db6a9fc9fc3595c35/docs/fundamentals/systems/form/formatting-and-parsing.md)
- [Interaction states](https://github.com/ing-bank/lion/blob/e45f5c198ccac32dc5c3fd5db6a9fc9fc3595c35/docs/fundamentals/systems/form/interaction-states.md)
- [Validation System](https://github.com/ing-bank/lion/blob/e45f5c198ccac32dc5c3fd5db6a9fc9fc3595c35/docs/fundamentals/systems/form/validate.md)