Form validation

Validation is achieved by applying isInvalid and optionally error props onto the EuiForm or EuiFormRow components. Errors are optional and are passed as an array in case you need to list more than one. You can also hide the callout by passing invalidCallout=“none“

Loading...

Usage

Validation error text

Validation messages are needed when the user input differs from what the system expects and enforces:

• Required fields that are still blank.
• Invalid values, for one or several reasons (forbidden characters, formatting, duplicate).

Use clear language that helps users understand what they have to do.

Name

Name is required.

Do: Use a simple, minimalist format for a required field.

Email

This address is already used. Enter a different one.

Do: Tell users what happened and how to fix it.

Key

The key can't contain the `:` character.

Do: Be as precise as possible to describe the problem.

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 ↵

𐘂𐘂