---
title: Auto-Populate Form Fields
product: Form Library
description: Learn how to auto-fill hidden and visible form fields with relevant values from survey data object or have them retrieved from another source on the web. A free demo for JavaScript.
framework: React
source: https://surveyjs.io/form-library/examples/auto-populate-form-fields/reactjs
index: https://surveyjs.io/form-library/examples/overview.md
---

# Auto-Populate Form Fields (React)

The auto-fill functionality allows you to auto-populate form fields of your surveys with previously entered data. This functionality is useful when part of survey information is already known. For example, Name and Email form fields can be filled automatically based on user login information.

To pre-populate form fields, use the [`data`](https://surveyjs.io/Documentation/Library?id=surveymodel#data) property of a Survey instance. This property contains survey result data as an object in which keys are question names and values are answers. To manage the survey result data, assign a new object to the `data` property. You can define this object locally or load it from a web service. In this demo, the `data` object is used to pre-fill information in read-only form fields.

Note that a new `data` object *replaces* the old object and erases entered data if there was any. If you want to *merge* the new and old objects, call the [`mergeData(newDataObj)`](https://surveyjs.io/form-library/documentation/surveymodel#mergeData) method.

If you want to pass values into individual form fields, call the [`setValue(questionName, newValue)`](https://surveyjs.io/Documentation/Library?id=surveymodel#setValue) method. Open the Settings panel and enter a value into one of the text boxes there. You will see this value copied into the corresponding question. This happens because the text boxes call the `setValue` method to auto-populate survey questions dynamically. A Survey instance also has the [`getValue(questionName)`](https://surveyjs.io/Documentation/Library?id=surveymodel#getValue) method that allows you to access individual form field values at runtime. Note that if you need to set more than one form field, replace the `data` object or call the `mergeData(newDataObj)` method to ensure optimal performance.

## 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));
    });
    survey.data = {name:'John Doe', email: 'johndoe@nobody.com'};
    survey.onValueChanged.add((sender, options) => {
        const el = document.getElementById(options.name);
        if (el) {
            el.value = options.value;
        }
    });
    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": [
    {
      "type": "text",
      "name": "name",
      "title": "Name:",
      "readOnly": true
    },
    {
      "type": "text",
      "name": "email",
      "title": "Email:",
      "readOnly": true
    },
    {
      "type": "checkbox",
      "name": "car",
      "title": "Which car do you drive?",
      "isRequired": true,
      "colCount": 4,
      "showNoneItem": true,
      "choices": [ "Ford", "Vauxhall", "Volkswagen", "Nissan", "Audi", "Mercedes-Benz", "BMW", "Peugeot", "Toyota", "Citroen" ]
    }
  ]
};
```

### `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/auto-populate-form-fields/angular.md)
- [Vue 3](https://surveyjs.io/form-library/examples/auto-populate-form-fields/vue3js.md)
- [jQuery](https://surveyjs.io/form-library/examples/auto-populate-form-fields/jquery.md)
- [Vanilla JS](https://surveyjs.io/form-library/examples/auto-populate-form-fields/vanillajs.md)