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. By default, EuiForm will render as a simple div unless you pass

component="form".

Accessibility requirement

Whenever possible, pass a label to EuiFormRow. If not using the label prop, you must instead apply an aria-label directly to the wrapped form control, or an aria-labelledby with the text node ID of an external label.

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.

Global full-width

To set all the row and controls in a form to fullWidth, specify the prop on the root EuiForm component.

Inline

Inline forms can be made with

EuiFlexGroup. Apply grow={false} on any of the items you want to collapse (like the button below). Note that the button's EuiFormRow wrapper also requires an additional prop when it’s missing a label hasEmptyLabelSpace.

Sizing inline form rows

Apply a width or change the grow prop on the wrapping EuiFlexItem to size individual controls. When you need to make a field smaller, always apply the width to the flex item, 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.

Props

EuiForm

Extends HTMLAttributes


Prop	Description and type	Default value
Prop className#	Description and type Type: `string`	Default value
Prop aria-label#	Description and type Defines a string value that labels the current element. @see aria-labelledby. Type: `string`	Default value
Prop data-test-subj#	Description and type Type: `string`	Default value
Prop css#	Description and type Type: `Interpolation<Theme>`	Default value
Prop component#	Description and type Which HTML element to render `div` or `form` Type: `"div" \| "form"`	Default value `div`
Prop isInvalid#	Description and type Type: `boolean`	Default value
Prop error#	Description and type Type: `ReactNode \| ReactNode[]`	Default value
Prop invalidCallout#	Description and type Where to display the callout with the list of errors Type: `"none" \| "above"`	Default value `above`
Prop fullWidth#	Description and type When set to `true`, all the rows/controls in this form will default to taking up 100% of the width of their continer. You can specify `fullWidth={false}` on individual rows/controls to disable this behavior for specific components. Type: `boolean`	Default value `false`
Prop ref#	Description and type Allows getting a ref to the component instance. Once the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref). @see {@link https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom React Docs} Type: `LegacyRef<HTMLElement>`	Default value

EuiFormRow