How to Conditionally Disable a Form Input in React-Bootstrap ?
Last Updated :
26 Oct, 2023
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
import React from 'react' ;
import FormInputDemo
from './FormInputDemo' ;
import './App.css' ;
const App = () => {
return (
<div class= "component" >
<FormInputDemo />
</div>
);
};
export default App;
|
Javascript
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
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
Share your thoughts in the comments
Please Login to comment...