React Input Group Component

Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs.

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.

@
@example.com
https://example.com/users/
$.00
@
With textarea
1<CInputGroup className="mb-3">
2 <CInputGroupText id="basic-addon1">@</CInputGroupText>
3 <CFormInput placeholder="Username" aria-label="Username" aria-describedby="basic-addon1"/>
4</CInputGroup>
5
6<CInputGroup className="mb-3">
7 <CFormInput placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="basic-addon2"/>
8 <CInputGroupText id="basic-addon2">@example.com</CInputGroupText>
9</CInputGroup>
10
11<CFormLabel htmlFor="basic-url">Your vanity URL</CFormLabel>
12<CInputGroup className="mb-3">
13 <CInputGroupText id="basic-addon3">https://example.com/users/</CInputGroupText>
14 <CFormInput id="basic-url" aria-describedby="basic-addon3"/>
15</CInputGroup>
16
17<CInputGroup className="mb-3">
18 <CInputGroupText>$</CInputGroupText>
19 <CFormInput aria-label="Amount (to the nearest dollar)"/>
20 <CInputGroupText>.00</CInputGroupText>
21</CInputGroup>
22
23<CInputGroup className="mb-3">
24 <CFormInput placeholder="Username" aria-label="Username"/>
25 <CInputGroupText>@</CInputGroupText>
26 <CFormInput placeholder="Server" aria-label="Server"/>
27</CInputGroup>
28
29<CInputGroup>
30 <CInputGroupText>With textarea</CInputGroupText>
31 <CFormTextarea aria-label="With textarea"></CFormTextarea>
32</CInputGroup>

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.

@
1<CInputGroup className="flex-nowrap">
2 <CInputGroupText id="addon-wrapping">@</CInputGroupText>
3 <CFormInput placeholder="Username" aria-label="Username" aria-describedby="addon-wrapping" />
4</CInputGroup>

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.

Small
Default
Large
1<CInputGroup size="sm" className="mb-3">
2 <CInputGroupText id="inputGroup-sizing-sm">Small</CInputGroupText>
3 <CFormInput aria-label="Sizing example input" aria-describedby="inputGroup-sizing-sm"/>
4</CInputGroup>
5
6<CInputGroup className="mb-3">
7 <CInputGroupText id="inputGroup-sizing-default">Default</CInputGroupText>
8 <CFormInput aria-label="Sizing example input" aria-describedby="inputGroup-sizing-default"/>
9</CInputGroup>
10
11<CInputGroup size="lg">
12 <CInputGroupText id="inputGroup-sizing-lg">Large</CInputGroupText>
13 <CFormInput aria-label="Sizing example input" aria-describedby="inputGroup-sizing-lg"/>
14</CInputGroup>

Checkboxes and radios#

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

1<CInputGroup className="mb-3">
2 <CInputGroupText>
3 <CFormCheck type="checkbox" value="" aria-label="Checkbox for following text input"/>
4 </CInputGroupText>
5 <CFormInput aria-label="Text input with checkbox"/>
6</CInputGroup>
7
8<CInputGroup>
9 <CInputGroupText>
10 <CFormCheck type="radio" value="" aria-label="Radio button for following text input"/>
11 </CInputGroupText>
12 <CFormInput aria-label="Text input with radio button"/>
13</CInputGroup>

Multiple inputs#

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

First and last name
1<CInputGroup>
2 <CInputGroupText>First and last name</CInputGroupText>
3 <CFormInput aria-label="First name" />
4 <CFormInput aria-label="Last name" />
5</CInputGroup>

Multiple addons#

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

$0.00
$0.00
1<CInputGroup className="mb-3">
2 <CInputGroupText>$</CInputGroupText>
3 <CInputGroupText>0.00</CInputGroupText>
4 <CFormInput aria-label="Dollar amount (with dot and two decimal places)"/>
5</CInputGroup>
6
7<CInputGroup>
8 <CFormInput aria-label="Dollar amount (with dot and two decimal places)"/>
9 <CInputGroupText>$</CInputGroupText>
10 <CInputGroupText>0.00</CInputGroupText>
11</CInputGroup>

Button addons#

1<CInputGroup className="mb-3">
2 <CButton type="button" color="secondary" variant="outline" id="button-addon1">Button</CButton>
3 <CFormInput placeholder="" aria-label="Example text with button addon" aria-describedby="button-addon1"/>
4</CInputGroup>
5
6<CInputGroup className="mb-3">
7 <CFormInput placeholder="Recipient's username" aria-label="Recipient's username" aria-describedby="button-addon2"/>
8 <CButton type="button" color="secondary" variant="outline" id="button-addon2">Button</CButton>
9</CInputGroup>
10
11<CInputGroup className="mb-3">
12 <CButton type="button" color="secondary" variant="outline">Button</CButton>
13 <CButton type="button" color="secondary" variant="outline">Button</CButton>
14 <CFormInput placeholder="" aria-label="Example text with two button addons"/>
15</CInputGroup>
16
17<CInputGroup>
18 <CFormInput placeholder="Recipient's username" aria-label="Recipient's username with two button addons"/>
19 <CButton type="button" color="secondary" variant="outline">Button</CButton>
20 <CButton type="button" color="secondary" variant="outline">Button</CButton>
21</CInputGroup>

Buttons with dropdowns#

1<CInputGroup className="mb-3">
2 <CDropdown variant="input-group">
3 <CDropdownToggle color="secondary" variant="outline">Dropdown</CDropdownToggle>
4 <CDropdownMenu>
5 <CDropdownItem href="#">Action</CDropdownItem>
6 <CDropdownItem href="#">Another action</CDropdownItem>
7 <CDropdownItem href="#">Something else here</CDropdownItem>
8 <CDropdownDivider/>
9 <CDropdownItem href="#">Separated link</CDropdownItem>
10 </CDropdownMenu>
11 </CDropdown>
12 <CFormInput aria-label="Text input with dropdown button"/>
13</CInputGroup>
14
15<CInputGroup className="mb-3">
16 <CFormInput aria-label="Text input with dropdown button"/>
17 <CDropdown alignment="end" variant="input-group">
18 <CDropdownToggle color="secondary" variant="outline">Dropdown</CDropdownToggle>
19 <CDropdownMenu>
20 <CDropdownItem href="#">Action</CDropdownItem>
21 <CDropdownItem href="#">Another action</CDropdownItem>
22 <CDropdownItem href="#">Something else here</CDropdownItem>
23 <CDropdownDivider/>
24 <CDropdownItem href="#">Separated link</CDropdownItem>
25 </CDropdownMenu>
26 </CDropdown>
27</CInputGroup>
28
29<CInputGroup>
30 <CDropdown variant="input-group">
31 <CDropdownToggle color="secondary" variant="outline">Dropdown</CDropdownToggle>
32 <CDropdownMenu>
33 <CDropdownItem href="#">Action</CDropdownItem>
34 <CDropdownItem href="#">Another action</CDropdownItem>
35 <CDropdownItem href="#">Something else here</CDropdownItem>
36 <CDropdownDivider/>
37 <CDropdownItem href="#">Separated link</CDropdownItem>
38 </CDropdownMenu>
39 </CDropdown>
40 <CFormInput aria-label="Text input with 2 dropdown buttons"/>
41 <CDropdown alignment="end" variant="input-group">
42 <CDropdownToggle color="secondary" variant="outline">Dropdown</CDropdownToggle>
43 <CDropdownMenu>
44 <CDropdownItem href="#">Action</CDropdownItem>
45 <CDropdownItem href="#">Another action</CDropdownItem>
46 <CDropdownItem href="#">Something else here</CDropdownItem>
47 <CDropdownDivider/>
48 <CDropdownItem href="#">Separated link</CDropdownItem>
49 </CDropdownMenu>
50 </CDropdown>
51</CInputGroup>

Segmented buttons#

1<CInputGroup className="mb-3">
2 <CDropdown variant="input-group">
3 <CButton type="button" color="secondary" variant="outline">Action</CButton>
4 <CDropdownToggle color="secondary" variant="outline" split/>
5 <CDropdownMenu>
6 <CDropdownItem href="#">Action</CDropdownItem>
7 <CDropdownItem href="#">Another action</CDropdownItem>
8 <CDropdownItem href="#">Something else here</CDropdownItem>
9 <CDropdownDivider/>
10 <CDropdownItem href="#">Separated link</CDropdownItem>
11 </CDropdownMenu>
12 </CDropdown>
13 <CFormInput aria-label="Text input with segmented dropdown button"/>
14</CInputGroup>
15
16<CInputGroup>
17 <CFormInput aria-label="Text input with segmented dropdown button"/>
18 <CDropdown alignment="end" variant="input-group">
19 <CButton type="button" color="secondary" variant="outline">Action</CButton>
20 <CDropdownToggle color="secondary" variant="outline" split/>
21 <CDropdownMenu>
22 <CDropdownItem href="#">Action</CDropdownItem>
23 <CDropdownItem href="#">Another action</CDropdownItem>
24 <CDropdownItem href="#">Something else here</CDropdownItem>
25 <CDropdownDivider/>
26 <CDropdownItem href="#">Separated link</CDropdownItem>
27 </CDropdownMenu>
28 </CDropdown>
29</CInputGroup>

Custom forms#

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

Custom select#

1<CInputGroup className="mb-3">
2 <CInputGroupText component="label" htmlFor="inputGroupSelect01">Options</CInputGroupText>
3 <CFormSelect id="inputGroupSelect01">
4 <option>Choose...</option>
5 <option value="1">One</option>
6 <option value="2">Two</option>
7 <option value="3">Three</option>
8 </CFormSelect>
9</CInputGroup>
10
11<CInputGroup className="mb-3">
12 <CFormSelect id="inputGroupSelect02">
13 <option>Choose...</option>
14 <option value="1">One</option>
15 <option value="2">Two</option>
16 <option value="3">Three</option>
17 </CFormSelect>
18 <CInputGroupText component="label" htmlFor="inputGroupSelect02">Options</CInputGroupText>
19</CInputGroup>
20
21<CInputGroup className="mb-3">
22 <CButton type="button" color="secondary" variant="outline">Button</CButton>
23 <CFormSelect id="inputGroupSelect03" aria-label="Example select with button addon">
24 <option>Choose...</option>
25 <option value="1">One</option>
26 <option value="2">Two</option>
27 <option value="3">Three</option>
28 </CFormSelect>
29</CInputGroup>
30
31<CInputGroup>
32 <CFormSelect id="inputGroupSelect04" aria-label="Example select with button addon">
33 <option>Choose...</option>
34 <option value="1">One</option>
35 <option value="2">Two</option>
36 <option value="3">Three</option>
37 </CFormSelect>
38 <CButton type="button" color="secondary" variant="outline">Button</CButton>
39</CInputGroup>

Custom file input#

1<CInputGroup className="mb-3">
2 <CInputGroupText component="label" htmlFor="inputGroupFile01">Upload</CInputGroupText>
3 <CFormInput type="file" id="inputGroupFile01"/>
4</CInputGroup>
5
6<CInputGroup className="mb-3">
7 <CFormInput type="file" id="inputGroupFile02"/>
8 <CInputGroupText component="label" htmlFor="inputGroupFile02">Upload</CInputGroupText>
9</CInputGroup>
10
11<CInputGroup className="mb-3">
12 <CButton type="button" color="secondary" variant="outline" id="inputGroupFileAddon03">Button</CButton>
13 <CFormInput type="file" id="inputGroupFile03" aria-describedby="inputGroupFileAddon03" aria-label="Upload"/>
14</CInputGroup>
15
16<CInputGroup>
17 <CFormInput type="file" id="inputGroupFile04" aria-describedby="inputGroupFileAddon04" aria-label="Upload"/>
18 <CButton type="button" color="secondary" variant="outline" id="inputGroupFileAddon04">Button</CButton>
19</CInputGroup>

API#

CInputGroup#

1import { CInputGroup } from '@coreui/react'
2// or
3import CInputGroup from '@coreui/react/src/components/form/CInputGroup'
PropertyDescriptionTypeDefault
classNameA string of all className you want applied to the component.string-
sizeSize the component small or large.'sm' | 'lg'-

CInputGroupText#

1import { CInputGroupText } from '@coreui/react'
2// or
3import CInputGroupText from '@coreui/react/src/components/form/CInputGroupText'
PropertyDescriptionTypeDefault
classNameA string of all className you want applied to the component.string-
componentComponent used for the root node. Either a string to use a HTML element or a component.string | ComponentClass<any, any> | FunctionComponent<any>-