# Dec 25th, 2021: \[en\] Using Elastic to build forms in your app

**URL:** <https://discuss.elastic.co/t/dec-25th-2021-en-using-elastic-to-build-forms-in-your-app/289475>\
**Category:** Advent Calendar\
**Created:** [December 25, 2021, 8:00am UTC](https://discuss.elastic.co/t/dec-25th-2021-en-using-elastic-to-build-forms-in-your-app/289475 "2021-12-25T08:00:54Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![britt\_joiner](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/britt_joiner/32/97233_2.png) [@britt\_joiner](https://discuss.elastic.co/u/britt_joiner)\
**Post date:** [December 25, 2021, 8:00am UTC](https://discuss.elastic.co/t/dec-25th-2021-en-using-elastic-to-build-forms-in-your-app/289475/1 "2021-12-25T08:00:54Z")

</div>

While Elastic is most known for our open-source search tools, did you know we also have an open-source design library that anyone can use for creating the user interface inside of your apps and websites? You can not only handle your data with Elastic, but you can also display and interact with the data with Elastic too!

It’s all thanks to our design library called EUI (Elastic User Interface). You might recognize some of the components (no pun intended) from Kibana. For today’s post, I want to share one of my favorite EUI Component - The Form - and how you can use it in your app.

## Set up EUI

[Getting started](https://elastic.github.io/eui/#/guidelines/getting-started) with EUI in your React app is simple. For the most part, you just need to add `@elastic/eui` as a dependency in your project and import the CSS files. Then you’re ready to start using the components!

## Out of the Box Form

Just about every app needs to collect input from a user and EUI provides a lot of options for doing just that. The styling comes out of the box but allows for customization. (_As a bonus, you can apply `classNames` to every EUI component to apply your own custom styles.)_

We use the form component in our customer support portal for users to create a new support case.

**![](https://us1.discourse-cdn.com/elastic/original/3X/0/a/0a20df6000d8d67bed12d9bad0bb6b8076b592ec.gif)**

As you can see, you can use just about anything as an input type! We have some really advanced dropdowns here, a file picker, a text input, and even a markdown editor!

Here’s an example of how we format a field for adding contacts to a case:

```auto
<EuiFormRow
  fullWidth // this defines the width
  label={
    <EuiI18n
      token="newCase.informed"
      default="Who else should we keep informed? (optional)"
    />
  } // label for the row, with options for localizing text through our i18n utility
>
  <EuiI18n
    token="newCase.informedPlaceholder"
    default="Select contacts"
  > // default text over the box
    {(informedPlaceholder: string) => (
      <EuiComboBox // dropdown input type
        fullWidth 
        isClearable={true} // customization option allowing you to define the ability to remove all the selections
        isLoading={
          this.props.contacts.loading ? true : undefined
        } // define a loading state
        onChange={this.handleContactSelect} // what it sounds like :) 
        options={this.state.contactOptions} // an array containing all the dropdown values 
        placeholder={informedPlaceholder} // default text
        selectedOptions={this.state.contactsSelected} // which values are selected
      />
    )}
  </EuiI18n>
</EuiFormRow>

```

_You can read more about these props in the [EUI Docs](https://elastic.github.io/eui/#/forms/combo-box)._

## Incorporating Validation

If you want to ensure only the right data comes through the field, you'll be able to easily set up form validation and error handling with EUI.

You'll need to add two props to a form row to set it, and then you'll need to create an `onChange` event for the field and/or an `onSubmit` event for the form to check the criteria of the values.

1. Define `isInvalid`. You'll need to add a prop to your field that accepts a boolean for showing if the field is valid or not. This will change the color of the field's box to `red` so that a user can visibly see the field needs edits. _This is the field we will set in the `onSubmit` function in a few steps._

```auto
isInvalid={this.state.formErrors.statusEmpty}

```

1. Pass an array of messages to show `error`. This could be just one error (like "cannot be blank"), or if you have multiple types of errors that can occur, you can pass each of those in there with the criteria.)

```auto
error={[
// we're passing two errors - one that checks if the field is empty 
// and another to check if it's too long
  this.state.formErrors.bodyTooLong && (
    <EuiI18n
      token="newCase.lengthErrorMessage"
      default="Must be less than {maxLength} characters."
      values={{
        maxLength: MAX_BODY_LENGTH,
      }}
    />
  ),
  this.state.formErrors.bodyEmpty && (
    <EuiI18n
      token="newCase.bodyEmptyErrorMessage"
      default="The description cannot be empty."
    />
  ),
 ]}

```

1. Create a handler function to check your criteria on form submission and update your isInvalid/error fields.

```auto
if (
  !body ||
  !subject
  ) {
  this.setState((prevState) => {
    return {
      formErrors: {
        ...prevState.formErrors,
        bodyEmpty: !body,
        subjectEmpty: !subject,
      },
    };
});

```

And voila! Now you have error handling!  
 ![error-handling](https://us1.discourse-cdn.com/elastic/original/3X/5/8/58637a17d76dbba945be22329aaefa6be87189b2.gif)

**Note - you can also create an `onChange` or `onBlur` event on those inputs to check before the form is submitted.**

I've only scratched the surface here. To learn more, check out the [EUI Forms docs](https://elastic.github.io/eui/#/forms/form-controls) and see all the different ways you can customize them and use them!

---

<div class="post-metadata">

**Author:** ![britt\_joiner](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/britt_joiner/32/97233_2.png) [@britt\_joiner](https://discuss.elastic.co/u/britt_joiner)\
**Post date:** [December 14, 2021, 5:00pm UTC](https://discuss.elastic.co/t/dec-25th-2021-en-using-elastic-to-build-forms-in-your-app/289475/2 "2021-12-14T17:00:33Z")

</div>



---

<div class="post-metadata">

**Author:** ![britt\_joiner](https://sea2.discourse-cdn.com/elastic/user_avatar/discuss.elastic.co/britt_joiner/32/97233_2.png) [@britt\_joiner](https://discuss.elastic.co/u/britt_joiner)\
**Post date:** [December 14, 2021, 5:00pm UTC](https://discuss.elastic.co/t/dec-25th-2021-en-using-elastic-to-build-forms-in-your-app/289475/3 "2021-12-14T17:00:41Z")

</div>



---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/elastic/original/3X/1/a/1ac57faf039f6b580b3f104ef42a2a89e41014de.png) [@system](https://discuss.elastic.co/u/system)\
**Post date:** [January 11, 2022, 5:01pm UTC](https://discuss.elastic.co/t/dec-25th-2021-en-using-elastic-to-build-forms-in-your-app/289475/4 "2022-01-11T17:01:04Z")

</div>

This topic was automatically closed 28 days after the last reply. New replies are no longer allowed.