React Bootstrap Input Group Component

Input Group with Bootstrap Styling

Bootstrap 5 components designed for React.js

This component is part of the CoreUI for React.js UI components library, which offers all Bootstrap components designed to work seamlessly with React.js.

If you want to use Bootstrap 5 in a React.js environment while also needing advanced components that Bootstrap does not offer and dedicated developer support, then this library is the best solution for you.

Learn how to extend CoreUI’s React input fields with Bootstrap-styled input groups—add text, buttons, selects, or custom file inputs seamlessly.

On this page

How to use React Bootstrap Input Group component#

Use CoreUI’s <CInputGroup> components styled with Bootstrap to enhance form inputs by prepending or appending text, buttons, selects, and more—perfect for building rich form UIs.

Basic usage#

Add text or buttons on either side of the input using <CInputGroupText> or <CButton>.

@example.com

Your vanity URL

https://example.com/users/

$.00

With textarea

Wrapping content#

Input groups use flex-wrap by default, which allows wrapping when needed—especially useful for validation messages or long inputs.

To prevent wrapping, add .flex-nowrap.

Input group sizing#

Change size by applying size="sm" or size="lg" to <CInputGroup>. All inner elements will automatically adjust.

Small

Default

Large

📌 Note: Do not apply size classes to individual input elements inside the group.

Checkboxes and radio buttons#

Include checkboxes or radios inside your input group to align them with text fields or buttons.

Multiple inputs#

You can group multiple inputs side by side using a single <CInputGroup>. Useful for username + domain, ranges, etc.

First and last name

Multiple addons#

You can add multiple <CInputGroupText> elements before or after the input, or combine them with checkboxes or buttons.

$0.00

Input group with buttons#

Add buttons inside the input group to combine text entry with actions.

Buttons with dropdowns#

Group dropdown buttons together with your inputs using <CDropdown> components.

Segmented buttons#

You can also combine a primary button with a split dropdown inside the input group.

Custom form inputs#

CoreUI supports enhanced input groups with custom selects and file inputs. Default browser styles aren’t supported in this layout.

Select#

Options

Custom file input# Upload

File upload#

Upload

API reference#

Check out the API documentation for full details on available props.