React-Bootstrap Form Component
React-Bootstrap is a front-end framework that was designed keeping react in mind. Form Component provides a way to make a form and take user input and then forward it to the server for further data processing. We can use the following approach in ReactJS to use the react-bootstrap Form Component.
Form Props:
- ref: It is used to forward the form-ref to the underlying element.
- as: It can be used as a custom element type for this component.
- inline: It is used to display the series of labels, buttons, etc on a single horizontal row.
- validated: It is used to mark a form as having been validated with true/false value.
- bsPrefix: It is an escape hatch for working with strongly customized bootstrap CSS.
Form.Label Props:
- ref: It is used to forward the form-ref to the underlying element.
- as: It can be used as a custom element type for this component.
- column: It is used to render the FormLabel as a <Col> component.
- htmlFor: It is used to Uses controlId from <FormGroup> if not explicitly specified.
- srOnly: It is used to hide the label visually.
- bsPrefix: It is an escape hatch for working with strongly customized bootstrap CSS.
Form.Group Props:
- ref: It is used to forward the form-ref to the underlying element.
- as: It can be used as a custom element type for this component.
- controlId: It is used to set the id on <FormControl> and htmlFor on <FormGroup.Label> component.
- bsPrefix: It is an escape hatch for working with strongly customized bootstrap CSS.
Form.Row Props:
- as: It can be used as a custom element type for this component.
- bsPrefix: It is an escape hatch for working with strongly customized bootstrap CSS.
Form.Text Props:
- ref: It is used to forward the formText ref to the underlying element.
- as: It can be used as a custom element type for this component.
- muted: It is used to add the text-muted class to it.
- bsPrefix: It is an escape hatch for working with strongly customized bootstrap CSS.
Form.Check Props:
- as: It can be used as a custom element type for this component.
- id: It is the normal HTML id attribute used for the identification.
- isInvalid: It is used to manually set the styling of the input as invalid.
- isStatic: It is used to add the position-static style to it.
- isValid: It is used to manually set the styling of the input as valid.
- type: It is used for the checkable types.
- bsPrefix: It is an escape hatch for working with strongly customized bootstrap CSS.
- bsCustomPrefix: For custom controls, it is used as a separate bsPrefix.
Form.Control Props:
- ref: It is used to forward the form-ref to the underlying element.
- as: It can be used as a custom element type for this component.
- custom: It is used to make use of Bootstrap’s custom form elements.
- disabled: It is used to make the control disabled.
- htmlSize: For the underlying element, it is used for its size attribute.
- id: It is used to make use of controlId from <FormGroup>
- isInvalid: For the control, it is used to add invalid validation styles.
- isValid: For the control, it is used to add valid validation styles.
- onChange: It is a callback function that is triggered on a change of value.
- plaintext: It is used to render the input as plain text.
- readOnly: It is used to make the control in the read-only state.
- size: It is used to denote the input size.
- type: It is used to denote the HTML input type for input.
- value: For underlying input, it is used for its value attribute.
- bsPrefix: It is an escape hatch for working with strongly customized bootstrap CSS.
- bsCustomPrefix: For custom controls, it is a separate bsPrefix.
Creating React Application And Installing Module:
Step 1: Create a React application using the following command:
npx create-react-app foldername
Step 2: After creating your project folder i.e. foldername, move to it using the following command:
cd foldername
Step 3: After creating the ReactJS application, Install the required module using the following command:
npm install react-bootstrap npm install bootstrap
Project Structure: It will look like the following.
Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.
Filename: App.js
javascript
import React from 'react' ; import 'bootstrap/dist/css/bootstrap.css' ; import Form from 'react-bootstrap/Form' ; import Button from 'react-bootstrap/Button' ; export default function App() { return ( <div style={{ display: 'block' , width: 700, padding: 30 }}> <h4>React-Bootstrap Form Component</h4> <Form> <Form.Group> <Form.Label>Enter your full name:</Form.Label> <Form.Control type= "text" placeholder= "Enter your full name" /> </Form.Group> <Form.Group> <Form.Label>Enter your email address:</Form.Label> <Form.Control type= "email" placeholder= "Enter your your email address" /> </Form.Group> <Form.Group> <Form.Label>Enter your age:</Form.Label> <Form.Control type= "number" placeholder= "Enter your age" /> </Form.Group> <Button variant= "primary" type= "submit" > Click here to submit form </Button> </Form> </div> ); } |
Step to Run Application: Run the application using the following command from the root directory of the project:
npm start
Output: Now open your browser and go to http://localhost:3000/, you will see the following output: