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.

Project Structure

Example: Now write down the following code in the App.js file. Here, App is our default component where we have written our code.

App.js

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>
  );
}