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".

EuiFormRow controls the child id

EuiFormRow composes related ids for the associated labels and help texts based on the id passed on EuiFormRow and passes it down to the child form element.

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

Extends HTMLAttributes


Prop	Description and type	Default value
Prop labelType#	Description and type Defaults to rendering a `<label>` but if passed `'legend'` for labelType, will render both a `<legend>` and the surrounding container as a `<fieldset>` Type: `"label" \| "legend"`	Default value `label`
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 display#	Description and type `columnCompressed` creates a compressed and horizontal layout `center`/`centerCompressed` helps align non-input content better with inline form layouts `rowCompressed` - deprecated, does not currently affect styling Type: `"center" \| "row" \| "columnCompressed" \| "centerCompressed" \| "rowCompressed"`	Default value `row`
Prop hasEmptyLabelSpace#	Description and type Useful for inline form layouts, primarily for content that needs to be aligned with inputs but does not need a label Type: `boolean`	Default value `false`
Prop fullWidth#	Description and type Expand to fill 100% of the parent. Defaults to `fullWidth` prop of `<EuiForm>`. Type: `boolean`	Default value `false`
Prop describedByIds#	Description and type IDs of additional elements that should be part of children's `aria-describedby` Type: `string[]`	Default value
Prop hasChildLabel#	Description and type Escape hatch to not render duplicate labels if the child also renders a label Type: `boolean`	Default value `true`
Prop children#	Description and type ReactElement to render as this component's content Type: `ReactElement<any, string \| JSXElementConstructor<any>> & ReactNode`	Default value
Prop label#	Description and type Type: `ReactNode`	Default value
Prop labelAppend#	Description and type Adds an extra node to the right of the form label without being contained inside the form label. Good for things like documentation links. Type: `any`	Default value
Prop id#	Description and type Type: `string`	Default value
Prop isInvalid#	Description and type Type: `boolean`	Default value
Prop error#	Description and type Type: `ReactNode \| ReactNode[]`	Default value
Prop helpText#	Description and type Adds a single node/string or an array of nodes/strings below the input Type: `ReactNode \| ReactNode[]`	Default value
Prop isDisabled#	Description and type Passed along to the label element; and to the child field element when `disabled` doesn't already exist on the child field element. Type: `boolean`	Default value