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.

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:

Article Tags :

ReactJS

Web Technologies

React-Bootstrap