Elastic UI Framework - Form layouts

Form and form rows

Use the EuiFormRow component to easily associate form components with labels, help text, and error text. Use the EuiForm component to group EuiFormRows.

Text field

I am some friendly help text.

Select (with no initial selection)

File picker

Select or drag and drop a file

Range

Use a switch instead of a single checkbox Some inputs also render their own labels, such as the switch, so they need the row label turned off because multiple labels break screen readers.

Should we do this?

Checkbox group labels should use a `legend` label type

Option one

Option two is checked by default

Option three

Full-width

Form elements will automatically flex to a max-width of 400px. You can optionally pass the fullWidth prop to the row and form control to expand to their container. This should be done rarely and usually you will only need it for isolated controls like search bars and sliders.

Works on form rows too

Note that the fullWidth prop is not passed to the form row's child

Often useful for text areas

Described form groups

Use EuiDescribedFormGroup component to associate multiple EuiFormRows. It can also simply be used with one EuiFormRow as a way to display help text (or additional text) next to the field instead of below (on mobile, will revert to being stacked).

Single text field

When using this with a single form row where this text serves as the help text for the input, it is a good idea to pass idAria="someID" to the form group and passdescribedByIds={[someID]} to its form row.

Text field

No description

Text field

Multiple fields

Here are three form rows. The first form row does not have a title.

We do not pass describedByIds when there are multiple form rows.

File picker

Select or drag and drop a file

Range

Full width

By default, EuiDescribedFormGroup will be double the default width of form elements. However, you can pass fullWidth prop to this, the individual field and row components to expand to their container.

Use a switch instead of a single checkbox

Should we do this?

Inline

Inline forms can be made with FlexGroup. Applygrow=false on any of the items you want to collapse (like this button). Note that the button FormRow component also requires an additional prop because it’s missing a label.

First name

I am helpful help text!

Last name

Sizing inline form rows

Apply a width to the wrapping FlexItem to size individual controls. When you need to make a field smaller, always apply the width to the FlexItem, not the input. The input inside will resize as needed.

When supplying children to an EuiFormRow that is not a form control, and you need to the content to vertically center with the other form controls, change the display prop to center or centerCompressed.

Age

Full name

Avatar

In a popover

Because forms auto-size to their wrapping elements, it means you can do fun things with them like stuff them in popovers and they’ll still work perfectly.