React Bootstrap Form Controls
React-Bootstrap is a front-end framework mainly customized for React. Form controls are used in the creation and management of form elements within a React application. These components are the parts of the React Bootstrap Library “Form”.
Syntax:
import Form from 'react-bootstrap/Form';
<Form>
<Form.Group>
<Form.Label></Form.Label>
<Form.Control/>
</Form.Group>
</Form>
Form Control API properties
Name |
Type |
Description |
---|---|---|
size |
‘sm’| ‘lg’ |
Input size variants |
htmlSize |
number |
It specifies the visible width in characters if as in input |
plaintext |
bool |
It renders the input as text. Generally used along side readOnly. |
readOnly |
bool |
It makes the control readonly |
disabled |
bool |
It makes the control disabled |
onChange |
function |
It is a callback function that fired when we change the input value |
Form Control Props:
Here, we are describing some common props.
- type: This prop define the specific input element.
- readOnly: This prop make the component only readonly.
- size: This props defines the size of the element
- as: Specifies the HTML element or component to render instead of the default <input> element.
Creating React Application And Installing dependencies:
Step 1: Create a React application using the following command.
npx create-react-app foldername
cd foldername
Step 2: Install the required dependencies.
npm install react-bootstrap bootstrap
Step 3: Add the below line in index.js file.
import 'bootstrap/dist/css/bootstrap.css';
Project Structure
The updated dependencies in package.json file will look like:
"dependencies": {
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"bootstrap": "^5.3.2",
"react": "^18.2.0",
"react-bootstrap": "^2.9.2",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"web-vitals": "^2.1.4"
}
Example 1: The following program demonstrates the simple Login form using Form Control.
Javascript
//App.js import React from 'react' ; import { Container } from 'react-bootstrap' ; import LoginForm from './LoginForm' ; const App = () => { return ( <Container> <LoginForm /> </Container> ) } export default App |
Javascript
// LoginForm.js import React, { useState } from "react" ; import { Form, Button } from "react-bootstrap" ; const LoginForm = () => { const [email, setEmail] = useState( "" ); const [password, setPassword] = useState( "" ); const handleEmailChange = (e) => { setEmail(e.target.value); }; const handlePasswordChange = (e) => { setPassword(e.target.value); }; const handleSubmit = (e) => { e.preventDefault(); // Handle login logic here (e.g., send credentials to server) console.log( "Login submitted:" , { email, password }); }; return ( <div style={{ display: "flex" , justifyContent: "center" , alignItems: "center" , height: "100vh" , }} > <Form onSubmit={handleSubmit} style={{ width: "400px" , padding: "20px" , border: "1px solid #ccc" , borderRadius: "8px" , boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)" , }} > <h2 style={{ textAlign: "center" , marginBottom: "20px" }}> Login </h2> <Form.Group controlId= "formBasicEmail" > <Form.Label>Email address</Form.Label> <Form.Control type= "email" placeholder= "Enter email" value={email} onChange={handleEmailChange} required size= "m" /> </Form.Group> <Form.Group controlId= "formBasicPassword" > <Form.Label>Password</Form.Label> <Form.Control type= "password" placeholder= "Password" value={password} onChange={handlePasswordChange} required size= "m" /> </Form.Group> <Button className= "mt-3" variant= "primary" type= "submit" size= "m" style={{ width: "100%" }} > Login </Button> </Form> </div> ); }; export default LoginForm; |
Output:
Example 2: The following program demonstrates the Form Control using the Text Area.
Javascript
//App.js import React from 'react' import FormText from './FormText' const App = () => { return ( <div> <FormText /> </div> ) } export default App |
Javascript
// FormText.js import React, { useState } from "react" ; import { Form, Button } from "react-bootstrap" ; const FormText = () => { const [message, setMessage] = useState( "" ); const handleMessageChange = (e) => { setMessage(e.target.value); }; const handleSubmit = (e) => { e.preventDefault(); // Handle form submission logic here console.log( "Message submitted:" , message); }; return ( <div style={{ display: "flex" , justifyContent: "center" , alignItems: "center" , height: "100vh" , }} > <Form onSubmit={handleSubmit} style={{ width: "400px" , padding: "20px" , border: "1px solid #ccc" , borderRadius: "8px" , boxShadow: "0 4px 8px rgba(0, 0, 0, 0.1)" , }} > <h2 style={{ textAlign: "center" , marginBottom: "20px" }}> Text Area Form </h2> <Form.Group controlId= "formTextarea" > <Form.Label>Message</Form.Label> <Form.Control as= "textarea" rows={5} placeholder= "Enter your message" value={message} onChange={handleMessageChange} required /> </Form.Group> <Button className= "mt-3" variant= "primary" type= "submit" style={{ width: "100%" }} > Submit </Button> </Form> </div> ); }; export default FormText; |
Output:
Contact Us