Compressed forms
Also known as Editor-Style Controls, compressed forms and controls were specifically created for use when space is at a premium. They are not intended for use when the form is the main objective of the page. They work best in editor-style applications where form controls are being used to create or edit content on the page.
To use compressed forms, pass display="rowCompressed" to the EuiFormRows and compressed=true to the form controls themselves.
Should we do this?
Column layout
Editor-style controls can be displayed in a two column layout for even better use of limited space, just pass display="columnCompressed" to align the labels and inputs side by side.
EuiSwitches are a special case in which so you must pass columnCompressedSwitch to the EuiFormRow as the display property.
Contextual help
When using compressed, horizontal form styles, it is best not to overload the UI with expansive help text. If it's short and part of the validation, use helpText. However, if it's an explanation of the control, consider wraping the label with an EuiToolTip and appending the questionInCircle icon to it.
Complex example
This is an example of how to combine compressed form controls with from rows, labels, prepend and appends in a column layout.
htmlFor and aria-label. For best results, each form control that is not wrapped in an EuiFormRow should be supplied an id.