---
title: React Input Group Component
name: Input group
description: Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.
route: /forms/input-group/
other_frameworks: input-group
---

## Basic example

Place one add-on or button on either side of an input. You may also place one on both sides of an input. Remember to place `<CFormLabel>`s outside the input group.

<ExampleSnippet component="InputGroupExample" componentName="React Form Input Group" />

## Wrapping

Input groups wrap by default via `flex-wrap: wrap` in order to accommodate custom form field validation within an input group. You may disable this with `.flex-nowrap`.

<ExampleSnippet component="InputGroupWrappingExample" componentName="React Form Input Group" />

## Sizing

Add the relative form sizing classes to the `<CInputGroup>` itself and contents within will automatically resize—no need for repeating the form control size classes on each element.

**Sizing on the individual input group elements isn't supported.**

<ExampleSnippet component="InputGroupSizingExample" componentName="React Form Input Group" />

## Checkboxes and radios

Place any checkbox or radio option within an input group's addon instead of text.

<ExampleSnippet component="InputGroupCheckboxesAndRadiosExample" componentName="React Form Input Group" />

## Multiple inputs

While multiple `<CFormInput>`s are supported visually, validation styles are only available for input groups with a single `<CFormInput>`.

<ExampleSnippet component="InputGroupMultipleInputsExample" componentName="React Form Input Group" />

## Multiple addons

Multiple add-ons are supported and can be mixed with checkbox and radio input versions.

<ExampleSnippet component="InputGroupMultipleAddonsExample" componentName="React Form Input Group" />

## Button addons

<ExampleSnippet component="InputGroupButtonAddonsExample" componentName="React Form Input Group" />

## Buttons with dropdowns

<ExampleSnippet component="InputGroupButtonsWithDropdownsExample" componentName="React Form Input Group" />

## Segmented buttons

<ExampleSnippet component="InputGroupSegmentedButtonsExample" componentName="React Form Input Group" />

## Custom forms

Input groups include support for custom selects and custom file inputs. Browser default versions of these are not supported.

### Custom select

<ExampleSnippet component="InputGroupCustomSelectExample" componentName="React Form Input Group" />

### Custom file input

<ExampleSnippet component="InputGroupCustomFileInputExample" componentName="React Form Input Group" />

## API

Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here.

- [&lt;CInputGroup /&gt;](./api/#cinputgroup)
- [&lt;CInputGroupText /&gt;](./api/#cinputgrouptext)
