Standard form elements have a 1px border, light gray, lightened by 20%. The bottom border is 2px, and its color depends on the selected color theme.
The text must also be the same color (setting the imd-text-{color} class is sufficient).
An active form control has a bottom border that is twice the size of the inactive version.
Tooltip text (also known as placeholders) is a mandatory element of all form elements.
The background of each field is white with 15% opacity (an exception to the standard).
The description text field is constructed in the same way. The text size in the field description should be 80% of the base text size. The description color is light gray. With this field configuration, you can omit the tooltip text for the form control.
To influence the color of the tooltip text, you can use the appropriate color class .imd-placeholder-[color].
Information about errors in forms can be signalled by using red accents and text information below the field.
This can be done by adding imd-form-error class to label.
Locked form fields are indicated by using a dashed line as the border style.
Lists allowing you to select an item are created according to the rules described for text fields.
Checkboxy są zwykłymi kwadratami, w ktorych w przypadku zaznaczenia pojawia sie znak "tick". Podobnie jak pola tekstowe w przypadku zablokowania nastepuje zamiana obramowania na przerywane.
In the case of checkboxes, we proceed in the same way as in the case of checkboxes.
Switches are dynamic elements that clearly indicate with their backlight whether the selected option is enabled or disabled. The color of the switch border is variable. The background of an active switch is automatically set to green mixed with 20% black and with inverted transparency (20% visibility).