React is a Javascript library for building user interfaces developed by facebook.React can be used for developing single-page and mobile applications.

ElasticUI is a framework. It is a collection of React UI components.It is mostly used for quickly building user interfaces at Elastic. In order to create a form in react using elastic ui form elements, create an application in react and install elastic ui framework into that application.

You can refer the files provided in this

https://github.com/KtreeOpenSource/ReactExamples/tree/master/ElasticUI_Form_ReactJS

Step 1: Install and run react application

Install react with following command

npm install -g create-react-app

Create an new react application

create-react-app app_name

In order to install all plugins in the package.json file, please run yarn
then start the application by running yarn start.

Step 2: Install Elastic UI

Install elastic-ui framework with below command

yarn add @elastic/eui

Step 3: Create Form using Elastic UI

If you follow Step 1 and Step 2, you must be able to start react application successfully.After that add below code in the file index.js file to get form.

Import react and required elastic ui components.

import React from ‘react’;

import {

    EuiFlexGroup,

    EuiFlexItem,

    EuiFormRow,

    EuiButton,

    EuiFieldText,

} from ‘@elastic/eui’;

Define one function and write code for generating form using elastic-ui components.

function Form () {

return (

<EuiFlexGroup style={{ maxWidth: 600 }}>

    <EuiFlexItem>

        <EuiFormRow label="First name" helpText="I am helpful help text!">

            <EuiFieldText />

        </EuiFormRow>

    </EuiFlexItem>

    <EuiFlexItem>

        <EuiFormRow label="Last name">

            <EuiFieldText />

        </EuiFormRow>

    </EuiFlexItem>

    <EuiFlexItem grow={false}>

        <EuiFormRow hasEmptyLabelSpace>

            <EuiButton>Save</EuiButton>

        </EuiFormRow>

    </EuiFlexItem>

</EuiFlexGroup>

);

}

Render the form function to the main root.

ReactDOM.render(<Form />, document.getElementById(‘root’));

For All the elastic UI elements check the docs https://elastic.github.io/eui/