React-Bootstrap Form Component

27 Apr, 2022
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.
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:
Reference: https://react-bootstrap.github.io/components/forms/
sagartomar9927
React-Bootstrap
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Axios in React: A Guide for Beginners
ReactJS setState()
How to pass data from one component to other component in ReactJS ?
Re-rendering Components in ReactJS
ReactJS defaultProps
Installation of Node.js on Linux
Top 10 Projects For Beginners To Practice HTML and CSS Skills
Difference between var, let and const keywords in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
Differences between Functional Components and Class Components in React