---
title: Conditional Read-Only State
product: Form Library
description: You can make sure respondents don't get confused and provide only relevant information by using the enableIf property in questions that might be inapplicable to some of your respondents. With SurveyJS, you can easily enable or disable such dependent questions based on preconfigured conditions. View a free demo for JavaScript to learn more.
framework: React
source: https://surveyjs.io/form-library/examples/how-to-conditionally-make-input-field-read-only/reactjs
index: https://surveyjs.io/form-library/examples/overview.md
---

# Conditional Read-Only State (React)

Survey elements can dynamically switch between enabled and read-only states based on conditions. When disabled, elements remain visible but non-interactive until a specified expression (the [`enableIf`](https://surveyjs.io/form-library/documentation/api-reference/question#enableIf) property) evaluates to `true`. This provides an alternative to [conditional visibility](https://surveyjs.io/form-library/examples/implement-conditional-logic-to-change-question-visibility/) for skip logic and branching while preserving the full form structure.

This demo includes three scenarios:

- Employment intake         
Employer name, job title, and start date are enabled only when the respondent selects “Employed” as their current status.

- Insurance details         
Provider, member ID, and group number are enabled only when the respondent confirms they have health insurance.

- Purchase channel          
Order number is enabled for online purchases, while store location is enabled for in-store purchases.

For more details on conditional logic, refer to the following help topic:

[Conditional Logic and Dynamic Texts](/form-library/documentation/design-survey/conditional-logic (linkStyle))

## 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": [
    {
      "type": "panel",
      "name": "employment",
      "title": "Employment",
      "elements": [
        {
          "type": "radiogroup",
          "name": "employmentStatus",
          "title": "Current employment status",
          "isRequired": true,
          "choices": [ "Employed", "Unemployed", "Retired", "Student" ],
          "colCount": 0
        },
        {
          "type": "text",
          "name": "employer",
          "title": "Current employer",
          "enableIf": "{employmentStatus} = 'Employed'"
        },
        {
          "type": "text",
          "name": "jobTitle",
          "title": "Job title",
          "enableIf": "{employmentStatus} = 'Employed'",
          "startWithNewLine": false
        },
        {
          "type": "text",
          "name": "employmentStartDate",
          "title": "Employment start date",
          "inputType": "date",
          "enableIf": "{employmentStatus} = 'Employed'"
        }
      ]
    },
    {
      "type": "panel",
      "name": "insurance",
      "title": "Insurance",
      "elements": [
        {
          "type": "boolean",
          "name": "hasInsurance",
          "title": "Do you have health insurance?",
          "isRequired": true
        },
        {
          "type": "text",
          "name": "insuranceProvider",
          "title": "Insurance provider",
          "enableIf": "{hasInsurance} = true"
        },
        {
          "type": "text",
          "name": "memberId",
          "title": "Member ID",
          "enableIf": "{hasInsurance} = true",
          "startWithNewLine": false
        },
        {
          "type": "text",
          "name": "groupNumber",
          "title": "Group number",
          "enableIf": "{hasInsurance} = true"
        }
      ]
    },
    {
      "type": "panel",
      "name": "returnRequest",
      "title": "Return request",
      "elements": [
        {
          "type": "radiogroup",
          "name": "purchaseChannel",
          "title": "Where did you purchase the item?",
          "isRequired": true,
          "choices": [ "Online", "In store" ],
          "colCount": 0
        },
        {
          "type": "text",
          "name": "orderNumber",
          "title": "Order number",
          "enableIf": "{purchaseChannel} = 'Online'"
        },
        {
          "type": "dropdown",
          "name": "storeLocation",
          "title": "Store location",
          "enableIf": "{purchaseChannel} = 'In store'",
          "startWithNewLine": false,
          "choices": [ "Downtown", "Westside Mall", "Airport" ]
        }
      ]
    }
  ]
}
;
```

### `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/how-to-conditionally-make-input-field-read-only/angular.md)
- [Vue 3](https://surveyjs.io/form-library/examples/how-to-conditionally-make-input-field-read-only/vue3js.md)
- [jQuery](https://surveyjs.io/form-library/examples/how-to-conditionally-make-input-field-read-only/jquery.md)
- [Vanilla JS](https://surveyjs.io/form-library/examples/how-to-conditionally-make-input-field-read-only/vanillajs.md)