How to Conditionally Disable a Form Input in React-Bootstrap ?

In this article, we will see how to conditionally disable a form input in React-Bootstrap. React-Bootstrap is a popular open-source library for building frontend components with the advantage of the pre-build component features of Bootstrap.

Creating React Application And Installing Module

Step 1: Create your react app by using this command

npx create-react-app appdemo

Step 2: Navigate to your project structure using this command.

cd appdemo

Step 3: Install the required modules i.e. react-bootstrap and bootstrap and other modules as per your requirement. To install react-bootstrap and bootstrap use this command

npm install react-bootstrap bootstrap

Step 4: Create your file with extension .jsx or .js and import the required components from react-bootstrap. Here I am importing Bootstrap CSS and Form, Row, Col components from react-bootstrap.

Project Structure

project structure

package.json:

{
    "name": "appdemo",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
        "@testing-library/jest-dom": "^5.17.0",
        "@testing-library/react": "^13.4.0",
        "@testing-library/user-event": "^13.5.0",
        "bootstrap": "^5.3.2",
        "react": "^18.2.0",
        "react-bootstrap": "^2.8.0",
        "react-dom": "^18.2.0",
        "react-scripts": "5.0.1",
        "web-vitals": "^2.1.4"
    }
}

Syntax to build a Form Component using React-Bootstrap

<Form>
    <Form.Group>
        <Form.Label>...<Form.Label>
                <Form.Control />
    </Form.Group>
</Form>

Example: Conditionally Disabling a Form-input Field. Let’s structure our form component to disable the input text-field name based on the gender.

Javascript

// App.js

import React from 'react';
import FormInputDemo
    from './FormInputDemo';
import './App.css';
const App = () => {
  return (
    <div class="component">
      <FormInputDemo />
    </div>
  );
};

export default App;

Javascript

// FormInputDemo.jsx

import React, { useState }
  from 'react';
import { Form, Row, Col }
  from 'react-bootstrap';
import './FormInputDemo.css';

const FormInputDemo = () => {
  const [gender, setGender] =
    useState('male');

  const handleGenderChange = (event) => {
    setGender(event.target.value);
  };

  return (
    <div>
      <Form>
        <Form.Group as={Row}>
          <Form.Label as="legend" column sm={2}>
            Gender
          </Form.Label>
          <Col sm={10}>
            <Form.Check
              type="radio"
              label="Male"
              value="male"
              checked={gender === 'male'}
              onChange={handleGenderChange}
            />
            <Form.Check
              type="radio"
              label="Female"
              value="female"
              checked={gender === 'female'}
              onChange={handleGenderChange}
            />
          </Col>
        </Form.Group>

        <Form.Group controlId="formName">
          <Form.Label>Name</Form.Label>
          <Form.Control
            type="text"
            placeholder="Enter name"
            disabled={gender !== 'female'}
            className={gender !== 'female' ?
              'disabled-input' : ''}
          />
        </Form.Group>
      </Form>
    </div>
  );
};

export default FormInputDemo;

CSS

/* FormInputDemo */

body {
    background-color: aliceblue;
}

.component {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 500px;
}

.form-check-label {
    margin-right: 300px;
}

.form-control {
    border-radius: 4px;
    font-size: 16px;
}

.form-group {
    margin-bottom: 20px;
    font-weight: bold;
}

.container {
    max-width: 500px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

.disabled-input {
    cursor: not-allowed;
}

Explanation

• In the above example, we have used Form element from React-Bootstrap to create my form component. Let’s discuss above various form components used here.
  • <Form>: It is used to wrap the entire form component and acts as a root element.
  • <Form.Group>: It is used to group the related elements together such as label, input field.
  • <Form.Label>: It is used to give a name or label to the associated form component.
  • <Form.Check>: It is used to create form check inputs like radio-buttons.
• Using the above mentioned form components, I have created a basic form structure containing two form elements i.e Input text field for name and radio-button group for the gender.
• In addition to that, I managed the change in the state of radio-button with the help of `useState` hook.I managed to handle the state using the `handleGenderChange`method. I am storing the value of the gender in the global variable `gender` and conditionally validating whether the gender input is male or female. If the gender is male then the input field of `name` is disabled or else it is enabled to the user to populate the input field with their name.

Output:

Output