🤩
Windframe Import Update is finally here.

InputGroup

React Bootstrap 5 InputGroup

React Bootstrap 5 Input group is used to collect data supplied by the user. It usually consists of buttons, text fields, and other forms of input.. Your forms will be more engaging and customizable using this component.

Importing the React Bootstrap 5 InputGroup Component

You can Start by importing CDBInputGroup into your project to use the Contrast React Bootstrap 5 InputGroup component.

js
import { CDBInputGroup } from 'cdbreact';

Basic input with appended text after

This is the default InputGroup

@example.com
js
import React from 'react';
import { CDBInputGroup, CDBContainer } from 'cdbreact';
const InputGroup = () => {
return (
<CDBContainer>
<CDBInputGroup
hint="Recipient's username"
containerClassName="mb-3 mt-0"
append="@example.com"
/>
</CDBContainer>
);
};
export default InputGroup;

Basic input with appended text before

@
js
import React from 'react';
import { CDBInputGroup, CDBContainer } from 'cdbreact';
const InputGroup = () => {
return (
<CDBContainer>
<CDBInputGroup containerClassName="flex-nowrap mb-3" prepend="@" hint="Username" />
</CDBContainer>
);
};
export default InputGroup;

Run function on icon click

js
import React from 'react';
import { CDBInputGroup, CDBContainer } from 'cdbreact';
const InputGroup = () => {
return (
<CDBContainer>
<CDBInputGroup icon="bell" onIconClick={() => alert('Wait! This is an alert!')} />
</CDBContainer>
);
};
export default InputGroup;

Small input group

Small
js
import React from 'react';
import { CDBInputGroup, CDBContainer } from 'cdbreact';
const InputGroup = () => {
return (
<CDBContainer>
<CDBInputGroup containerClassName="mb-2 mt-0" prepend="Small" size="sm" />
</CDBContainer>
);
};
export default InputGroup;

Large input group

Large
js
import React from 'react';
import { CDBInputGroup, CDBContainer } from 'cdbreact';
const InputGroup = () => {
return (
<CDBContainer>
<CDBInputGroup containerClassName="mb-2 mt-0" prepend="Large" size="lg" />
</CDBContainer>
);
};
export default InputGroup;

Input group with checkbox

js
import React from 'react';
import { CDBInputGroup, CDBInput, CDBContainer } from 'cdbreact';
const InputGroup = () => {
return (
<CDBContainer>
<CDBInputGroup
prepend={
<div className="input-group-text md-addon">
<input type="checkbox" />
</div>
}
/>
</CDBContainer>
);
};
export default InputGroup;

Basic input

js
import React from 'react';
import { CDBInputGroup, CDBInput, CDBContainer } from 'cdbreact';
const InputGroup = () => {
return (
<CDBContainer>
<CDBInputGroup />
</CDBContainer>
);
};
export default InputGroup;

Contrast React Bootstrap 5 InputGroup Props

This section will go over the props that the React Bootstrap 5 InputGroup component has to offer. You'll find out what these props are used for, how to use them, and what their default values are.

Other prop options for the 'CDBInputGroup' component are listed in the table below.

NameTypeDefaultDescriptionExample
classNameStringAdds custom classesAdds custom classes<CDBInputGroup className="myClass" ... />
containerClassNameStringAdds custom class to wrapper div<CDBInputGroup containerClassName="wrapper" ... />
containerIdStringAdds custom Id to wrapper div<CDBInputGroup containerId="id" ... />
hintStringSets the placeholder for the Input<CDBInputGroup hint="placeholder" ... />
idStringRequired! Set the id of the input element<CDBInputGroup id="myId" ... />
inputnodeReplaces default input for your custom elements<MDBInputGroup inputs={ <select className="browser-default custom-select" ...> <option value="0" ...>Choose< .../option> <option value="1" ...>One< .../option> <... /select>} .../>
tagStringdivChanges default input tag<CDBInputGroup tag="section" ... />
labelString or BooleandivAdds label for your input<CDBInputGroup group ... />
labelClassNameStringdivAdds custom class to the label<CDBInputGroup labelClassName="labelCustomClass" ... />
appendNode or StringnullAdds suffix for your input<CDBInputGroup append={
Send
} ... /> <CDBInputGroup append="@gmail.com" .../>
appendClassNamesStringAdds custom class to Input Group append element<CDBInputGroup appendClassNames="font-italic" .../>
prependClassNamesStringAdds custom class to Input Group prepend element<CDBInputGroup prependClassNames="font-italic" .../>
sizeStringlgChanges size of the component; available lg and sm<CDBInputGroup size="lg" ... />
typeStringtextThe type of the input element<CDBInputGroup type="textarea" ... />
validateBooleanfalseAdds .validate class to the Input component<CDBInputGroup validate .../>
valueNumber, Boolean or StringThe value of the input element (use with the controlled input)<CDBInputGroup value="I am controlled" onChange={this.handleChange} ... />
valueDefaultNumber or StringThe default value of the input (use with the uncontrolled input)<CDBInputGroup valueDefault="I am uncontrolled" ... />
arialLabelStringAdds custom aria-label text for input element<CDBInputGroup arialLabel="close" .../>
materialBooleanfalseChanges component styles for material theme<CDBInputGroup material .../>

Trying to build out all user interfaces and components for your website or web app from scratch can become a very tedious task. A huge reason why we created Contrast Bootstrap to help reduce the amount of time we spend doing that, so we can focus on building some other aspects of the project. Contrast Bootstrap PRO consists of a UI Kit featuring over 10000+ component variants. Together with a template of 5 admin dashboards and 23+ additional multipurpose pages template for building almost any type of website or web app. You can view a demo and learn more about Contrast by clicking here.Download the free react template

ad-banner

Contrast Bootstrap PRO was built using the most popular CSS framework Bootstrap to help build your next landing, admin SAAS, prelaunch etc project with a clean, prebuilt and well documented template and UI components.Learn more about Contrast