ReactJS MDBootstrap Input Group Component - GeeksforGeeks

07 Jan, 2022
MDBootstrap is a Material Design and bootstrap-based react UI library that is used to make good-looking webpages with its seamless and easy-to-use component. In this article, we will know how to use the Input Group Component in ReactJS MDBootstrap. Input Group allows a user to make a field in which the user can input some text.
 
Properties:
className: It is used to add custom classes to the MDBInputGroup
noWrap: It is used to disable the flex.
size: It is used to set the size of the MDBInputGroup
 
Syntax:
<MDBInputGroup>
    <MDBInputGroupElement></MDBInputGroupElement>
</MDBInputGroup>
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: Install ReactJS MDBootstrap in your given directory.
npm i mdb-ui-kit
npm i mdb-react-ui-kit
Step 4: Import the element to be used in the project.
import { MDBInputGroup } from 'mdb-react-ui-kit'
Project Structure: It will look like the following.
Step to Run Application: Run the application from the root directory of the project, using the following command.
npm start
Example 1: This is the basic example that shows how to use InputGroup Component.
App.js
import React from "react";import {    MDBInputGroup, MDBInputGroupText, MDBInputGroupElement} from 'mdb-react-ui-kit';  export default function App() {    return (        <div id="gfg">            <h2>GeeksforGeeks</h2>            <h4>ReactJS MDBootstrap Input Group component</h4>              <MDBInputGroup className='mb-3'>                <MDBInputGroupText>                    Input Text Here                </MDBInputGroupText>                <MDBInputGroupElement type='text'                     placeholder="React MDBootstrap" />            </MDBInputGroup>            <br />            <MDBInputGroup className='mb-3'>                <MDBInputGroupText>                    Input Number Here                </MDBInputGroupText>                <MDBInputGroupElement type='Number'                     placeholder="React MDBootstrap" />            </MDBInputGroup>        </div>    );}
Output:
Example 2: In this example, we will know how to add radio and checkbox in an Input group component.
Javascript
import React from "react";import {    MDBCheckbox, MDBRadio, MDBInputGroup, MDBInputGroupText, MDBInputGroupElement} from 'mdb-react-ui-kit';  export default function App() {    return (        <div id="gfg">            <h2>GeeksforGeeks</h2>            <h4>ReactJS MDBootstrap Input Group component</h4>              <MDBInputGroup className='mb-3'>                <MDBInputGroupText>                    <MDBCheckbox />                </MDBInputGroupText>                <MDBInputGroupElement type='text'                     placeholder="React MDBootstrap" />            </MDBInputGroup>            <br />            <MDBInputGroup className='mb-3'>                <MDBInputGroupText>                    <MDBRadio />                </MDBInputGroupText>                <MDBInputGroupElement type='Number'                     placeholder="React MDBootstrap" />            </MDBInputGroup>        </div>    );}
Output:
Example 3: In this example, we will know how to add buttons in an Input Group component.
Javascript
import React from "react";import {    MDBBtn, MDBInputGroup, MDBInputGroupElement} from 'mdb-react-ui-kit';  export default function App() {    return (        <div id="gfg">            <h2>GeeksforGeeks</h2>            <h4>ReactJS MDBootstrap Input Group component</h4>              <MDBInputGroup className='mb-3'>                <MDBBtn >GeeksforGeeks</MDBBtn>                <MDBInputGroupElement type='text'                     placeholder="React MDBootstrap" />            </MDBInputGroup>        </div>    );}
Output:
Reference: https://mdbootstrap.com/docs/b5/react/forms/input-group
MDBootstrap
ReactJS
Web Technologies
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
ReactJS useNavigate() Hook
How to set background images in ReactJS ?
Axios in React: A Guide for Beginners
How to create a table in ReactJS ?
How to navigate on path by button click in react router ?
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to insert spaces/tabs in text using HTML/CSS?
Difference between var, let and const keywords in JavaScript