---
title: Text Entry
product: Form Library
description: Add multiple entry boxes to your web forms and collect open-ended answers, like names and surnames of respondents in your JavaScript app.
framework: React
source: https://surveyjs.io/form-library/examples/text-entry-question/reactjs
index: https://surveyjs.io/form-library/examples/overview.md
---

# Text Entry (React)

Text entry form fields are designed for open-ended questions that demand short answers. You can also require that respondents enter specific values, such as an e-mail address or password. This example demonstrates different types of text box questions supported by SurveyJS Form Library. Switch between React, Vue, Vanilla JavaScript, jQuery, and Angular to view an example for your JavaScript framework.

## Create a Text Entry Question

To create a text entry form field, define an object with the `type` property set to `"text"` and add it to the [`elements`](https://surveyjs.io/form-library/documentation/pagemodel#elements) array. Within this object, specify the question's [`title`](https://surveyjs.io/form-library/documentation/questiontextmodel#title) and a unique [`name`](https://surveyjs.io/form-library/documentation/questiontextmodel#name) that identifies the text input question. Optionally, you can specify a [`description`](https://surveyjs.io/form-library/documentation/questiontextmodel#description) to place under the `title` and a [`placeholder`](https://surveyjs.io/form-library/documentation/questiontextmodel#placeholder) to show within the text entry box.

## Specify Input Type

If a question requires specific values, use the [`inputType`](https://surveyjs.io/form-library/documentation/questiontextmodel#inputType) property to specify the input type. An `inputType` value is passed on to the [`type`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input#input_types) attribute of the underlying `<input>` HTML element. This example demonstrates the `"email"`, `"password"`, `"url"`, and the default `"text"` input types.

In addition, you can specify the [`autocomplete`](https://surveyjs.io/form-library/documentation/questiontextmodel#autocomplete) property to let the browser suggest autofill values. For example, the "E-mail address" and "Password" form fields in this demo can be populated automatically if your browser contains autofill e-mail and password values.

## Validate Text Values

If you need to ensure that respondents fill out all required form fields and the format of values is correct, enable data validation. This example demonstrates the following validation types and describes how to configure them:

- Required Validation           
Enable the [`isRequired`](https://surveyjs.io/form-library/documentation/questiontextmodel#isRequired) property for the form fields that should not be empty.

- Text Length Validation            
Define an object with the `type` property set to `"text"` and add it to the [`validators`](https://surveyjs.io/form-library/documentation/questiontextmodel#validators) array. Use the [`minLength`](https://surveyjs.io/form-library/documentation/textvalidator#minLength) and [`maxLength`](https://surveyjs.io/form-library/documentation/textvalidator#maxLength) properties within this object to limit the text length (see the "Password" form field in this demo).

- RegEx Validation          
Define an object with the `type` property set to `"regex"` and add it to the `validators` array. Assign a regular expression to the [`regex`](https://surveyjs.io/form-library/documentation/regexvalidator#regex) property within this object (see the "URL" form field in this demo).

To learn more about data validation in SurveyJS Form Library, refer to the following help topic: [Data Validation](https://surveyjs.io/form-library/documentation/data-validation).

## Files

### `public/index.html`

```html
<div id="surveyElement" style="position: absolute; top: 0; left: 0; right: 0; bottom: 0; min-height: 100%; height:100%"></div>
```

### `src/SurveyComponent.jsx`

```js
import React from "react";
import { Model } from "survey-core";
import { Survey } from "survey-react-ui";
import "survey-core/survey-core.min.css";
import "./index.css";
import { json } from "./json";

function SurveyComponent() {
    const survey = new Model(json);
    survey.onComplete.add((sender, options) => {
        console.log(JSON.stringify(sender.data, null, 3));
    });
    return (<Survey model={survey} />);
}

export default SurveyComponent;
```

### `src/index.css`

```css
/* You can add your custom CSS here. */
```

### `src/index.js`

```js
import React from "react";
import { createRoot } from "react-dom/client";
import SurveyComponent from "./SurveyComponent";

const root = createRoot(document.getElementById("surveyElement"));
root.render(<SurveyComponent />);
```

### `src/json.js`

```js
export const json = {
  "elements": [{
    "name": "username",
    "type": "text",
    "title": "Username",
    "maxLength": 25
  }, {
    "name": "email",
    "type": "text",
    "title": "E-mail address",
    "inputType": "email",
    "placeholder": "foobar@example.com",
    "isRequired": true,
    "autocomplete": "email"
  }, {
    "name": "password",
    "type": "text",
    "title": "Password",
    "description": "Enter 8 characters minimum.",
    "inputType": "password",
    "isRequired": true,
    "autocomplete": "current-password",
    "validators": [{
      "type": "text",
      "minLength": 8,
      "text": "Your password must be at least 8 characters long."
    }]
  }, {
    "name": "url",
    "type": "text",
    "title": "URL",
    "inputType": "url",
    "placeholder": "https://www.example.com",
    "validators": [{
      "type": "regex",
      "regex": "https://.*",
      "text": "Your answer must match the URL pattern."
    }]
  }]
};
```

### `src/theme.js`

```js
export const themeJson = {};
```

### `package.json`

```json
{
  "dependencies": {
    "react": "latest",
    "react-dom": "latest",
    "survey-core": "latest",
    "survey-react-ui": "latest"
  },
  "devDependencies": {
    "react-scripts": "latest"
  }
}
```

## Other Frameworks

- [Angular](https://surveyjs.io/form-library/examples/text-entry-question/angular.md)
- [Vue 3](https://surveyjs.io/form-library/examples/text-entry-question/vue3js.md)
- [jQuery](https://surveyjs.io/form-library/examples/text-entry-question/jquery.md)
- [Vanilla JS](https://surveyjs.io/form-library/examples/text-entry-question/vanillajs.md)