React-Bootstrap Form Component
Last Updated :
17 Sep, 2024
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.
The React-Bootstrap Form Component is used to create and manage form and form elements like labels, input, checkboxes, radio, select input, and buttons. It is easy to use and provides a responsive layout throughout the application.
Syntax:
<Form onSubmit={handleSubmit}>
<Form.Group controlId="formBasicEmail">
<Form.Label>Email address</Form.Label>
<Form.Control type="email" placeholder="Enter email" />
<Form.Text className="text-muted">
your email is secured
</Form.Text>
</Form.Group>
<Button variant="primary" type="submit">
Submit
</Button>
</Form>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.
It is used to add lavels to form control in the react bootstrap forms.
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.
It is used to group different form items like form label, form control, and form input.
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.
It is used to create horizontally aligned groups of form control. It is based on grid layout.
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:
It add descriptions and conceptual text after the form control.
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.
It adds checkbox and radio inputs with bootstrap predefined stlyes.
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.
It creates different types of form inputs like text, email, files etc.
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.
Steps to SetUp React and Install React-Bootstrap 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: This example uses React-Bootstrap Form Component to create a form in react with name, email and age inputs.
JavaScript
// Filename: 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:
Summary
The Form component in React Bootstrap provides simple way of creating resposive forms along with the bootstrap styling. It includes different types of form components like labels, text, email inputs, checkboxes, radio, and buttons to create a complete from.