Skip to content
Related Articles

Related Articles

Improve Article

React-Bootstrap Form Component

  • Last Updated : 04 May, 2021

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

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/




My Personal Notes arrow_drop_up
Recommended Articles
Page :