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.
Do not use compressed and non-compressed form controls in the same form.
To use compressed forms, pass
compressed=true to all form controls.
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.
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 wrapping the label with an
questionInCircle icon to it.
In a popover
Always use the compressed version of forms and elements when they exist inside of a popover.
Complex example
This is an example of how to combine compressed form controls with from rows, labels, prepend and appends in a column layout.
Accessibility recommendation
Pay close attention to the patterns of using htmlFor and aria-label. For best results, each form control that is not wrapped in an EuiFormRow should be supplied an id.