validation.mdx

sidebar_position	8
sidebar_label	Validation

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“

import React, { useState, Fragment } from 'react';
import {
  EuiButton,
  EuiForm,
  EuiSelect,
  EuiFormRow,
  EuiTextArea,
  EuiFieldText,
  EuiSpacer,
} from '@elastic/eui';

export default () => {
  const [showErrors, setShowErrors] = useState(true);

  const onButtonClick = () => {
    setShowErrors(!showErrors);
  };

  const button = (
    <EuiButton fill color="danger" onClick={onButtonClick}>
      Toggle errors
    </EuiButton>
  );

  let errors;

  if (showErrors) {
    errors = [
      "Here's an example of an error",
      'You might have more than one error, so pass an array.',
    ];
  }

  return (
    <Fragment>
      <EuiForm isInvalid={showErrors} error={errors} component="form">
        <EuiFormRow label="Validation only" isInvalid={showErrors}>
          <EuiFieldText name="first" isInvalid={showErrors} />
        </EuiFormRow>

        <EuiFormRow
          label="Validation with help text and errors"
          helpText="I am some friendly help text."
          isInvalid={showErrors}
          error={errors}
        >
          <EuiFieldText name="text" isInvalid={showErrors} />
        </EuiFormRow>

        <EuiFormRow label="Text area" isInvalid={showErrors}>
          <EuiTextArea name="area" isInvalid={showErrors} />
        </EuiFormRow>

        <EuiFormRow label="Select" isInvalid={showErrors}>
          <EuiSelect
            options={[
              { value: 'option_one', text: 'Option one' },
              { value: 'option_two', text: 'Option two' },
              { value: 'option_three', text: 'Option three' },
            ]}
            isInvalid={showErrors}
          />
        </EuiFormRow>

        <EuiSpacer />

        {button}
      </EuiForm>
    </Fragment>
  );
};

Usage

import { EuiFormRow, EuiFieldText } from '@elastic/eui';

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.

Props

import docgen from '@elastic/eui-docgen/dist/components/form';