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
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:
Contact Us