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.

danger

Do not use compressed and non-compressed form controls in the same form.

To use compressed forms, pass display="rowCompressed" to the EuiFormRows and compressed=true to the form controls themselves.

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.

In a popover

Always use the compressed version of forms and elements when they exist inside 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.

warning

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.