Search...

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 .../>

Build modern projects using Bootstrap 5 and Contrast

Trying to create components and pages for a web app or website from scratch while maintaining a modern User interface can be very tedious. This is why we created Contrast, to help drastically 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 Premium UI Kit Library featuring over 10000+ component variants. Which even comes bundled together with its own admin template comprising of 5 admin dashboards and 23+ additional admin and multipurpose pages for building almost any type of website or web app.
See a demo and learn more about Contrast Bootstrap Pro by clicking here.