Forms
Forms have elements - or groups of elements - that allow you to include information or configure options.
They demand time from the users, so it is recommended that they be as brief as possible. Before asking for information, understand if it is really necessary and if that is the best time.
Labels
Labels, or labels, are information that help in understanding the information. If the label is not used, let us know what kind of information is expected in that space via the placeholder, thus providing more clarity to the form.
You can use labels in Inputs, Selects and to list items with Checkbox or Radio Buttons.
Grid and spacing
Whenever possible, try to position the forms horizontally, using the grid as a support element. There is no set minimum or maximum size rule, take into account what will be the best experience offered.
Grid
Spacing
Input + Button
If necessary, a button can be applied next to the Input field. You need to ensure they are aligned and that the spacing between them uses the --size-spacing-03 spacing.
Button placement
Forms with applications between the primary and secondary button have some usage rules:
Right aligned
This is the default alignment of buttons on forms. They are always displayed at the end of the form and in the order of secondary button and primary button.
Left aligned
It can be used in exceptional cases. To use this option, the order in which the buttons appear must always be the primary button before and the secondary button after.
Required fields
They must always be accompanied by a red asterisk (*) next to the field label. When all screen elements are mandatory, it is not necessary to use an asterisk.
Validation
Field with error
The field error warning should happen through the highlighting of this field and a feedback message just below (helper), to help with the resolution.
It is important that the error message indicates what is wrong and how to fix it. If possible, anticipate the error and give filling tips in the helper itself.
To check feedback message standards, refer to the Writing Style guide in this document.
The "error" state must remain until the information is corrected, then return to the field's default state.
Default field
Invalid field
Valid field (in default style)
Field with success
In specific cases, where the information provided needs external validation, it is possible to use a checkmark icon and helpers appropriate to the process steps.